Dragula 复制并删除OnSpill

Question

我正在尝试使用 Dragula 拖放库将元素克隆到目标容器中，并允许用户通过将克隆元素拖放到目标容器之外（溢出）来从目标容器中删除它们。

使用提供的示例，我有这个：

dragula([$('left-copy-1tomany'), $('right-copy-1tomany')], {
   copy: function (el, source) {
      return source === $('left-copy-1tomany');
   },
   accepts: function (el, target) {
      return target !== $('left-copy-1tomany');
   } 
});
dragula([$('right-copy-1tomany')], { removeOnSpill: true });

这不起作用 - 如果容器接受副本，“removeOnSpill”似乎根本不起作用。

有人知道我没有做什么、做错了什么或者是否有解决方法？

蒂亚！

Answer 1

我在寻找使用 ng2-dragula for angular2 解决类似问题一段时间后来到这里。

    dragulaService.setOptions('wallet-bag', {
  removeOnSpill: (el: Element, source: Element): boolean => {
    return source.id === 'wallet';
  },
  copySortSource: false,
  copy: (el: Element, source: Element): boolean => {
    return source.id !== 'wallet';
  },
  accepts: (el: Element, target: Element, source: Element, sibling: Element): boolean => {
    return !el.contains(target) && target.id === 'wallet';
  }
});

我有 4 个 div，可以全部拖入一个 id 为

wallet

的 div 他们都是

wallet-bag

的一部分 使用此代码，它们都可以复制到钱包中，而不是相互之间复制，并且您可以使用溢出将它们从钱包中删除，但不能从其他钱包中删除。

我发布我的解决方案，因为它也可能对某人有帮助。

Answer 2

好吧，所以我得到的一般答案是：

您可以让“removeOnSpill”工作 - 即使“复制”选项设置为 true - ，前提是您将“复制”选项设置为仅当“源”容器不是您要从中删除元素的容器时应用。

在我的例子中，我有 3 个容器，我可以从中拖入另一个名为“to_drop_to”的容器。 这些容器的 ID 均以“drag”开头。

所以我设定：

var containers = [document.querySelector('#drag1'),
                document.querySelector('#drag2'),
                document.querySelector('#drag3'), 
                document.querySelector('#to_drop_to')];

dragula(containers, {
    accepts: function (el, target, source, sibling) {
        return $(target).attr('id')=="gadget_drop"; // elements can be dropped only in 'to_drop_to' container
    },
    copy: function(el,source){
        return $(source).attr('id').match('drag'); //elements are copied only if they are not already copied ones. That enables the 'removeOnSpill' to work
    },
    removeOnSpill: true 
}

这对我有用。

希望有帮助。

Answer 3

来自 Dragula 文档
options.removeOnSpill

默认情况下，将元素溢出到任何容器之外都会移动 元素回到反馈预览的放置位置 阴影。将removeOnSpill设置为true将确保元素被删除 任何批准的容器之外的内容都会从 DOM 中删除。 请注意 如果复制设置为 true，则删除事件不会触发。