Search code examples
vue.jsdraggablevuedraggable

Vue draggable. Prevent drop on specific node and allow drop on specific node

<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>

I use draggable for vue3 https://github.com/SortableJS/vue.draggable.next
I have array with items I want to drag And 2 empty arrays which look the same as first one and have the same group name.

I need items with specific index in array be draggable only to the first column (first array) and with another index only to the second column (second array)? How to implement this? Is there something that I can use except group name (all items to drag are from the same group)

Solution
    1. You should wrap each your column in draggable
    2. Add @change event listener on each column
    3. In that event listener you can check whether that item must be processed or not: if the item is not suitable for that area you do nothing, otherwise you do something.