如何禁用在 ng2-dragula 上拖动某些元素

Question

我想在顶部显示名称组并取消其上的拖动事件。我怎样才能禁止移动某些元素，比如这个组名在顶部。我的代码是：

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

我的模板：

<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

找到解决方案：

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

Answer 2

禁用具有特定 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 3

您需要添加这两个功能（移动、接受）。移动将阻止您事件开始拖动元素。 Accepts with sibling null 将阻止其他可拖动元素尝试更改不在模型中的元素的位置。

    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 4

自 Version 2（发布于 2018-07-19）以来，您应该使用 dragulaService.createGroup() 而不是 dragulaService.setOptions():

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

Answer 5

这是一个替代方案。您可以使用 invalid 而不是 moves。摘自 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.

如何禁用在 ng2-dragula 上拖动某些元素

How to disable drag some element on ng2-dragula

ng2-dragula

angular