I am using this to implement drag-drop in my vue app. Lets my array is:

lists: [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    { id: 3, name: 'Item 3' },
]

I want to get the element object from the list after finishing the drop event. For example, I am moving the Item 1 item. After finishing the drag-drop, I want to get the print of which item has been moved. So, I want to get the output:

{ id: 1, name: 'Item 1' }

To get that, I have used @end:

      <draggable 
           
          ghost- 
          :list="lists" 
          group="my-group"
          @end="finish($event, lists)"
      >

And at finish function, I would like to get the desired output: { id: 1, name: 'Item 1' } from my <v-list v-for="list in lists"></v-list>. So, what to do at this function?

     finish (evt, draggedList) {
        // console.log('finished')
        // desired output (if item 1 has been moved):
        // { id: 1, name: 'Item 1' }
      }

Codepen Demo

CodePudding user response：

Use @change="finish" then change your method:

finish (item) {
  console.log(item.moved.element) // { id: 1, name: 'Item 1' }
}

RTM: https://github.com/SortableJS/Vue.Draggable#events part which mentions change event.