How to disable drag some element on ng2-dragula

倖福魔咒の 提交于 2019-12-01 16:08:42

问题


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>

回答1:


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



回答2:


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



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



回答4:


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


});



回答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.



来源:https://stackoverflow.com/questions/41137782/how-to-disable-drag-some-element-on-ng2-dragula

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!