Ng-Dragula 并删除更详细的约束

Question

我正在使用 Ionic 3 和 Angular 4 框架以及 Ng-Dragula 库开发应用程序。

我需要对 Ng-Dragula 提供的元素拖放进行更详细的控制。

例如，我有三列。

我希望用户可以移动物品：

• 从第一列到第二列；
• 从第二栏到第三栏；
• 从第三列到第二列。

我不希望用户可以移动项目：

• 从第一列到第三列。
• 从第二列到第一列。
• 从第三列到第一列。

如何设置详细的约束？

Answer 1

您可以在每个容器（每列）上设置选项，其中包含一个 'accepts' 函数，用于确定是否可以将特定项目放在特定容器的特定位置。

例如，

dragulaService.setOptions('column-1', {
      accepts: function(el, target, source, sibling) {
          // return true to allow drop, false to disallow
      }
    })

根据 https://github.com/bevacqua/dragula#optionsaccepts 上的文档， 此函数的参数是：

• el - 被丢弃的物品

• target - 放置物品的容器

• source - 从中​​拖动项目的容器

• sibling - 之前目标容器中的项目 该项目正在被删除，如果作为最后一个项目被删除，则为 null

你会 return true 允许掉落，false 阻止掉落。