How to disable drag some element on ng2-dragula

Question

I want to display name group on the top and cancel the drag event on it. How can I disable moving some element like if this group name on the top. My code is:

dragulaService.drag.subscribe((value) => {
    console.log(`drag: ${value[0]}`);
});

My template :

<div class='wrapper'>
  <div class='container' *ngFor='let group of groups' [dragula]='"nested-bag"'>
     <div class="center-block">Table Number : {{group.name}}</div>
    <div *ngFor='let item of group.items' [innerHtml]='item.name'></div>
  </div>
</div>

score 14 · Accepted Answer · answered Dec 14 '16 at 09:54

14

find a solution:

  dragulaService.setOptions('nested-bag', {
      revertOnSpill: true,
      moves: function (el:any, container:any, handle:any):any {
        debugger
        console.log(el, container);
        return false;
      }
    });

answered Dec 14 '16 at 09:54

Vitaly Menchikovsky

7,684
17
57
89

score 4 · Answer 2 · answered Jan 15 '18 at 09:37

4

To disable dragging element with specific class:

dragulaService.setOptions('PUT_CONTAINER_NAME_HERE', {
    moves: function (el: any, container: any, handle: any): any {
        if (el.classList.contains('PUT_YOUR_CLASS_HERE')) {
            return false;
        }

        return true;
    }
});

answered Jan 15 '18 at 09:37

szmitas

301
2
10

PUT_CONTAINER_NAME_HERE does this relate to the bag-name ? – somedirection Jul 11 '18 at 19:33
6

`setOptions` is now `createGroup` for anyone using a more recent release – abney317 Dec 27 '18 at 17:44

Samuel Philipp · Answer 3 · 2019-04-18T14:19:14.277

4

Since Version 2 (released 2018-07-19) you should use dragulaService.createGroup() instead of dragulaService.setOptions():

dragulaService.createGroup('<container-name>', {
    moves: (el, container, handle, sibling) => false
});

edited Apr 18 '19 at 14:19

answered Apr 17 '19 at 21:50

Samuel Philipp

10,631
12
36
56

score 1 · Answer 4 · answered Feb 22 '19 at 05:22

You need to add both functions(moves, accepts). Moves will prevent you to event start dragging the element. Accepts with sibling null will prevent other draggable elements trying to change position with the one is not in the model.

    dragulaService.setOptions('PUT_CONTAINER_NAME_HERE', {
    moves: function (el: any, container: any, handle: any): any {
        if (el.classList.contains('PUT_YOUR_CLASS_HERE')) {
            return false;
        }
        return true;
    },
      accepts: (el, target, source, sibling) => {
        if (sibling === null) {
          return false;
        }


});

score 0 · Answer 5 · answered May 13 '19 at 07:28

Here is an alternative. You can use invalid instead of moves. Taken from the documentation:

You can provide an invalid method with a (el, handle) signature. This method should return true for elements that shouldn't trigger a drag. The handle argument is the element that was clicked, while el is the item that would be dragged. Here's the default implementation, which doesn't prevent any drags.
function invalidTarget (el, handle) {
  return false;
}
Note that invalid will be invoked on the DOM element that was clicked and every parent up to immediate children of a drake container.

This is the better more-universal answer for newest implementations — , Apr 17 '20 at 10:13

How to disable drag some element on ng2-dragula

5 Answers5

Linked