vuedraggable的用法

VueDraggable是一个用于Vue.js的可拖拽列表组件，它允许用户通过拖拽来重新排序列表中的元素。以下是VueDraggable的基本用法：

1. 首先，你需要在你的Vue项目中安装VueDraggable，你可以使用npm或者yarn来安装：

npm install vuedraggable

2. 在你的Vue组件中引入VueDraggable：

import draggable from 'vuedraggable'

3. 然后，你可以在你的Vue组件的template中使用VueDraggable组件，并绑定一个数组作为列表的数据源：

<draggable v-model="list">
  <div v-for="item in list" :key="item.id">{{ item.name }}</div>
</draggable>

在上面的代码中，`list`是一个数组，包含了要展示的列表项。`v-model`指令将列表项绑定到`list`数组，使得当用户拖拽重新排序列表时，`list`数组也会相应地更新。

4. 最后，在你的Vue组件的script中，定义`list`数组和其他需要的数据和方法：

export default {
  data() {
    return {
      list: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
        { id: 4, name: 'Item 4' },
      ]
    }
  }
}

这样，你就完成了VueDraggable的基本用法。用户可以通过拖拽来重新排序列表中的元素，并且`list`数组会相应地更新。你可以根据你的需求来自定义拖拽样式和行为，VueDraggable提供了丰富的配置选项，可以参考官方文档来了解更多用法和配置选项。