Vue 可拖动。防止在特定节点上丢弃并允许在特定节点上丢弃

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 使用 draggable https://github.com/SortableJS/vue.draggable.next
我有一些我想拖动的项目 和 2 个空数组，它们看起来与第一个相同并且具有相同的组名。

我需要数组中具有特定索引的项目只能拖动到第一列（第一个数组），而另一个索引只能拖动到第二列（第二个数组）？ 如何实施？除了组名（所有要拖动的项目都来自同一组）之外，还有什么我可以使用的吗？

Answer 1

1. 您应该将每个列包装在 draggable
中
2. 在每列上添加 @change 事件侦听器
3. 在该事件侦听器中，您可以检查该项目是否必须处理：如果该项目不适合该区域，则什么也不做，否则您做一些事情。

Answer 2

您可以添加 'move' prop 和 return false， 参考这个：https://github.com/SortableJS/Vue.Draggable/issues/897