Vue.可拖动的不同行为取决于放置位置

Question

我正在使用Vue.Draggable进行一些拖放操作。

是否可以从 移动元素到克隆取决于您拖动它的位置？

如果我将其拖放到区域 A 中，我想要移动元素的正常行为 但是如果我将其拖放到B区，我想克隆该元素。

有人知道该怎么做吗？谢谢

Answer 1

您可以使用put和pull作为函数来动态控制行为。请参阅组选项。

<div id='app'>
<draggable class='area' :group='group' :list='list1'>
<div class='item' v-for='element in list1' :key='element.name'>
{{ element.name }}
</div>
</draggable>
<draggable class='area' group='foo' :list='list2' data-zone='A'>
<div class='item' v-for='element in list2' :key='element.name'>
{{ element.name }}
</div>
</draggable>
<draggable class='area' group='foo' :list='list3' data-zone='B'>
<div class='item' v-for='element in list3' :key='element.name'>
{{ element.name }}
</div>
</draggable>
</div>

group() {
return {
name: 'foo',
put: false,
pull(to) {
let zone = to.el.dataset.zone
switch (zone) {
case 'A': return true
case 'B': return 'clone'
}
return false
}
}
}

例