5

我正在尝试使用 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' 似乎根本不起作用。

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

蒂亚！

4

3 回答 3

8

在使用 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 它们都是wallet-bag 使用此代码的一部分，它们都可以复制到钱包中，而不是相互复制，您可以使用将它们从钱包中删除泄漏，但不是来自其他人。

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

于 2016-07-01T07:37:30.363 回答
1

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

你可以让 '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 
}

这对我有用。

希望能帮助到你。

于 2017-04-28T12:10:36.067 回答
0

从 Dragula 文档
options.removeOnSpill

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

于 2016-02-18T21:53:16.393 回答