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

vue.jsdraggablevuedraggable


Solution 1:[1]

  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.

Solution 2:[2]

You can add 'move' prop and return false, refer this : https://github.com/SortableJS/Vue.Draggable/issues/897

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Eduardo
Solution 2 Mayur Patil

Related Questions