如何获取vue可拖动的移动项目

Question

我正在使用 this 在我的 vue 应用程序中实现拖放。让我的数组是：

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

我想在完成放置事件后从列表中获取元素对象。例如，我正在移动 Item 1 项目。完成拖放后，我想打印哪个项目已被移动。所以，我想得到输出：

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

为此，我使用了 @end:

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

并且在 finish 函数中，我想从我的 <v-list v-for="list in lists"></v-list> 中获得所需的输出：{ id: 1, name: 'Item 1' }。那么，这个功能要做什么呢？

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

Codepen Demo

Answer 1

使用@change="finish"然后改变你的方法：

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

RTM：https://github.com/SortableJS/Vue.Draggable#events 部分提到了 change 事件。

如何获取vue可拖动的移动项目

how to get vue draggable moved item

vue.js

vuedraggable