[Vuejs]-Vue.js โ€“ Drag n Drop / Merge

2๐Ÿ‘

1๐Ÿ‘

@elalamianas Iโ€™ve found a way to solve my problem using vue.draggable.

For the drag items list, iโ€™ve use this code at the HTML:

<draggable v-model="List1" :options="{group:{name:'LIST1.name', pull:'clone'}}" @start="drag=true">

For the drop place, as i wanted to clone the list 1 item, and then merge at the list 2 item, iโ€™ve used:

<draggable v-model="List2" :options="{group:{ put:'LIST1.name'}}" @add="onAdd">

Iโ€™ve use the following script:

 onAdd: function (evt) {
      console.log(evt)
      alert(evt.clone.id + ', ' + evt.path[1].id)
  },
  components: {
    draggable
  }

So, everytime i drop the item from list 1 at list 2, i receive an alert with the ID of the item dropped.

My english is not fluent, so i am sorry for the incorrect grammar. But, thanks for your suggestion!

Leave a comment