3

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

user1896653
  • 3,247
  • 14
  • 49
  • 93

1 Answers1

4

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.

Lawrence Cherone
  • 46,049
  • 7
  • 62
  • 106
  • what if I have 2 dopping containers? I have updated my codepen. So, each time an item moved, two prints have happened. One is the desired output and another is `''`. Is there any way to get the output only for one droppable container? – user1896653 Mar 27 '22 at 19:45
  • your pen seems to be working, i.e not printing 2 in console – Lawrence Cherone Mar 27 '22 at 20:17
  • It seems tough to me to raise the issue in codepen. I am accepting the answer for now. Maybe, I will come up with a new question with the more clear demo. – user1896653 Mar 27 '22 at 20:33