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

禁用具有特定类的拖动元素：

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

自Version 2（发布于2018-07-19）以来，您应该使用j而不是j：

dragulaService.createGroup()

Answer 4

您需要添加两个功能（移动，接受）。移动将阻止您事件开始拖动元素。用同级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 5

这是另一种选择。您可以使用invalid代替moves。取自documentation：

您可以提供带有invalid签名的(el, handle)方法。对于不应触发以下操作的元素，此方法应返回true 拖动。 handle参数是被点击的元素，而 el是将被拖动的项目。这是默认值实施，不会阻止任何拖累。
function invalidTarget (el, handle) {
  return false;
}
请注意，invalid将在以下位置的DOM元素上被调用：单击，每个父级直到一个drake的直系子级容器。

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

5 个答案: