drag-and-drop - Dragula 复制和removeOnSpill

标签 drag-and-drop copy dragula

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

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

蒂亚!

最佳答案

我在寻找使用 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 的一部分
使用此代码,它们都可以复制到钱包中,而不是相互复制,您可以使用溢出将它们从钱包中删除,但不能从其他人中删除。

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

关于drag-and-drop - Dragula 复制和removeOnSpill,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33487913/

相关文章:

复制一个 3 dim 数组本身

javascript - DOM 更改后更新 Vue.js 中的数组顺序

javascript - 德拉古拉不拖

c# - 使用 Dragula 在应用程序中拖放 WebDriver

java - 在屏幕上拖动矩形的代码是什么?

android - 在 ListView 中实现滑动

java - htmlunit-driver - 如何模拟拖放?

android - 不会阻止在 Android 中拖放的不显眼的弹出窗口

c - 如何尽量减少系统调用次数?在C中

r - 如何将行从一个 data.frame 复制到另一个 [R]