Vue.js 拖拽排序组件 vuedraggable 使用教程

vuedraggable 是一个基于 Vue.js 的可拖动列表组件，它提供了一种简单的方法来实现可拖动列表和排序功能。

使用 vuedraggable 组件，需要先引入 vuedraggable 的依赖包，然后在 Vue 实例中注册 vuedraggable 组件，即可在模板中使用 vuedraggable。

下面是一个简单的 vuedraggable 的使用示例：

1. 安装 vuedraggable

npm install vuedraggable --save

2. 在 Vue 实例中注册 vuedraggable 组件

import draggable from 'vuedraggable'

export default {
  components: {
    draggable
  }
}

3. 在模板中使用 vuedraggable

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

其中，v-model 指定了可拖动列表的数据源，v-for 用于循环生成可拖动的列表项。

需要注意的是，vuedraggable 组件需要在 <draggable> 标签内部使用 v-for 循环渲染列表项，并且要为每个列表项指定一个唯一的 key 属性。

以上就是 vuedraggable 的简单使用方法。