Vue.js 拖放库 vuedraggable 使用教程：详细步骤和示例

vuedraggable 是一个 Vue.js 的拖放库，可以让你创建可拖动的列表。以下是使用 vuedraggable 的详细步骤：

1. 首先，在你的 Vue.js 项目中安装 vuedraggable。

npm install vuedraggable --save

2. 在你的 Vue 组件中引入 vuedraggable。

import draggable from 'vuedraggable'

3. 在你的 Vue 组件中使用 vuedraggable。

<draggable v-model='items'>
  <div v-for='(item, index) in items' :key='item.id'>
    {{ item.name }}
  </div>
</draggable>

在这个例子中，我们将一个数组 items 绑定到了 draggable 组件上。v-model 是一个指令，可以让你在拖放过程中自动更新数组的顺序。

4. 如果你需要在拖放结束后执行一些操作，可以添加一个 @end 事件处理函数。

<draggable v-model='items' @end='onEnd'>
  <div v-for='(item, index) in items' :key='item.id'>
    {{ item.name }}
  </div>
</draggable>

methods: {
  onEnd(event) {
    console.log(event)
  }
}

在这个例子中，我们添加了一个 onEnd 方法，当拖放结束时，将会调用这个方法。在这个方法中，我们可以访问到事件对象，并在控制台中打印出来。

以上就是使用 vuedraggable 的详细步骤。如果你需要更多的信息和示例，请访问官方文档：https://github.com/SortableJS/Vue.Draggable