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

【问题标题】：Ng-Dragula and drop more detailed constraintsNg-Dragula 并删除更详细的约束
【发布时间】：2018-01-07 13:59:06
【问题描述】：

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

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

例如，我有三列。

我希望用户可以移动元素：

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

我不希望用户可以移动元素：

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

如何设置这个详细的约束？

【问题讨论】：

标签： angular drag-and-drop ionic3 dragula ng2-dragula

【解决方案1】：

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

例如，

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

您将返回 true 以允许丢弃，false 以阻止它。

【讨论】：

谢谢！效果很好！但我现在有另一个问题。如果我无法从第一列移动到第三列，但在尝试将其拖放到第三列之前将项目拖到第二列上，则该项目将被拖放到第二列。有什么办法可以预防吗？
回答我自己的问题可以通过选项 revertOnSpill: true 和或 removeOnSpill: true 来完成。