可拖动.防止特定节点上的drop，并允许特定节点上的drop

Question

<draggable 
class="nodes-to-drag" 
v-model="arrayToDrag" 
group="people" 
@start="drag = true" 
@end="drag = false" 
item-key="id"
>
<template #item="{ element }">
<p class="items-from-arrayToDrag">{{ element.name }}</p>
</template>
</draggable>

我使用可拖动的vue3 https://github.com/SortableJS/vue.draggable.next
我有一个数组的项目，我想要拖动还有两个空数组，它们看起来和第一个数组一样，并且具有相同的组名。

我需要在数组中具有特定索引的项目仅可拖动到第一列(第一个数组)和另一个索引仅到第二列(第二个数组)?如何实现这一点?除了组名(要拖动的所有项目都来自同一组)，还有什么可以使用的吗

Answer 1

1. 你应该在draggable
中包装你的每一列
2. 在每列上添加@change事件监听器
3. 在该事件监听器中，您可以检查该项目是否必须处理:如果该项目不适合该区域，则不做任何操作，否则执行某些操作。

Answer 2

你可以添加'move' prop并返回false，参考:https://github.com/SortableJS/Vue.Draggable/issues/897