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
class="list-group"
ghost-class="moving-card"
: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' }
}
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.