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

问题描述

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

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

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

感谢您的任何建议。

解决方法

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

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

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

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

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