Vue.Draggable：从多个组拖入一个目标组

Question

我在 Vue.js 2 项目中使用 vuedraggable。我有两个组（称之为目录），我想从中将项目拖到目标组。例如。有一个“黄色”目录和“红色”目录，我想将它们合并到“橙色”目标列表中。

是否有解决方案，允许从“黄色”到“橙色”以及从“红色”到“橙色”拖动，但阻止用户在“黄色”和“红色”组之间拖动？

到目前为止，我只能为所有三个组（两个源和一个目标）设置组名，但这并不能阻止用户在两个源之间拖动项目（这不是想要）。

感谢任何建议。

Answer 1

实际上，这比我想象的要容易...

关键是要正确设置 draggable 组件。所有三个列表都需要共享相同的组名称，但前两个（目录）必须指定 pull 和 put 选项。所以必须将 group 属性设置为一个对象。如果此对象中的 put 设置为 false，则该列表根本不接受传入的删除请求。

<draggable
        :list="yellows"
        :group="{ name: 'universalGroup', pull: 'clone', put: false }"
        :clone="cloneYellow"
      >

<draggable
        :list="reds"
        :group="{ name: 'universalGroup', pull: 'clone', put: false }"
        :clone="cloneRed"
      >

<draggable
        :list="oranges"
        group="universalGroup"
      >

Vue.Draggable：从多个组拖入一个目标组

Vue.Draggable: Dragging from multiple groups into one target group

vuedraggable