vue.jsvuedraggable

how to get vue draggable moved item


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

Codepen Demo


Solution

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