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‘就不能工作。

有谁知道我没有在做什么，做错了什么，或者有没有人知道我在做什么？

蒂娅！

Answer 1

从dragula文档

options.removeOnSpill

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

Answer 2

我在这里寻找了一段时间后，使用ng2-dragula为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，它们都可以拖动到一个具有wallet id的div中--它们都是使用此代码的wallet-bag的一部分，它们都可以复制到钱包中，而不是相互之间复制，您可以使用溢出的文件将它们从钱包中删除，但不能从其他的钱包中删除。

我正在张贴我的解决方案，因为它也可能帮助某人。

Answer 3

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

您可以让“removeOnSpill”工作--即使将“复制”选项设置为true --只有当“源”容器不是要从其中移除元素时，才能设置“复制”选项。

在我的例子中，我有3个容器，可以从其中拖动另一个容器，名为“to_drop_to”。那些容器的所有id都以‘拖’开头。

所以我决定：

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 
}

这对我来说很管用。

希望能帮上忙。