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>

Answer 1

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;
        }


});

Answer 2

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;
      }
    });

Answer 3

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
});

Answer 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;
    }
});

Answer 5

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.