vuedraggable 怎么使用

`vuedraggable` 是一个基于 `Sortable.js` 的 Vue 拖拽排序组件，可以方便地实现拖拽排序的功能。使用 `vuedraggable` 组件，你需要先安装 `vuedraggable` 模块：

npm install vuedraggable

安装后，在你的 Vue 组件中引入 `vuedraggable` 组件：

import draggable from 'vuedraggable'

然后在 Vue 组件中使用 `vuedraggable` 组件，示例代码如下：

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

<script>
import draggable from 'vuedraggable'

export default {
  components: {
    draggable
  },
  data() {
    return {
      list: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        { id: 3, text: 'Item 3' },
        { id: 4, text: 'Item 4' },
        { id: 5, text: 'Item 5' }
      ]
    }
  }
}
</script>

在上面的示例中，我们使用 `v-for` 循环遍历数据源 `list`，并将 `list` 绑定到 `v-model` 中，这样就可以实现拖拽排序的功能了。同时，你可以根据你的需求设置 `draggable` 组件的其他属性，例如 `group`、`handle`、`clone` 等等。更多详细信息可以参考官方文档：[https://github.com/SortableJS/Vue.Draggable](https://github.com/SortableJS/Vue.Draggable)。