Dragula 复制和 removeOnSpill

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' 似乎根本不起作用。

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

TIA！

Answer 1

来自 dragula 文档
options.removeOnSpill

By default, spilling an element outside of any containers will move the element back to the drop position previewed by the feedback shadow. Setting removeOnSpill to true will ensure elements dropped outside of any approved containers are removed from the DOM. Note that remove events won't fire if copy is set to true.

Answer 2

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

    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 3

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

您可以让 'removeOnSpill' 工作 - 即使 'copy' 选项设置为 true - 仅当您将 'copy' 选项设置为仅在 'source' 容器时应用不是您要从中删除元素的那个。

在我的例子中，我有 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 
}

这对我有用。

希望对您有所帮助。

Dragula 复制和 removeOnSpill

Dragula Copy and removeOnSpill

drag-and-drop

copy

dragula