Vue.Draggable:从多个组拖动到一个目标组中



我在Vue.js 2项目中使用vuedraggable。我有两个组(称之为目录(,我想从中拖动项目到目标组。例如,有一个";黄色";以及";红色";,我想将其组合在"0"的目标列表中;桔子";。

有没有一种解决方案可以实现从";黄色";至";桔子";并且从";红色";至";桔子";,但是防止用户在"触摸"之间拖动;黄色";以及";红色";团体?

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

谢谢你的建议。

实际上,这比我想象的要容易。。。

关键是正确设置draggable组件。所有三个列表都需要共享相同的组名,但前两个(目录(必须指定pullput选项。因此,必须将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"
>

最新更新