8

我想在顶部显示名称组并取消其上的拖动事件。如何禁用移动某些元素，例如此组名在顶部。我的代码是：

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>
4

5 回答 5

14

找到解决方案：

  dragulaService.setOptions('nested-bag', {
      revertOnSpill: true,
      moves: function (el:any, container:any, handle:any):any {
        debugger
        console.log(el, container);
        return false;
      }
    });
于 2016-12-14T09:54:12.177 回答
4

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

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;
    }
});
于 2018-01-15T09:37:19.330 回答
4

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

dragulaService.createGroup('<container-name>', {
    moves: (el, container, handle, sibling) => false
});
于 2019-04-17T21:50:50.177 回答
1

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


});
于 2019-02-22T05:22:29.433 回答
0

这是一个替代方案。您可以使用invalid而不是moves. 取自文档：

您可以提供invalid带有(el, handle)签名的方法。此方法应返回true不应触发拖动的元素。handle参数是被单击的元素， 而是el要拖动的项目。这是默认实现，它不会阻止任何拖动。

function invalidTarget (el, handle) {
  return false;
}

请注意，这invalid将在被单击的 DOM 元素和drake 容器的每个父级到直接子级上调用。

于 2019-05-13T07:28:22.173 回答