vuedraggable使用

Vue Draggable 是一个 Vue.js 组件，用于实现可拖拽排序的功能。它是基于 Sortable.js 插件开发的。

要使用 Vue Draggable，首先需要在项目中安装它：

npm install vuedraggable

然后，在你的 Vue 组件中引入并注册 Vue Draggable：

import draggable from 'vuedraggable';

export default {
  components: {
    draggable,
  },
  // ...
}

接下来，你可以在模板中使用 `<draggable>` 组件来创建可拖拽列表。例如：

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

<script>
export default {
  data() {
    return {
      list: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
      ],
    };
  },
};
</script>

在上面的例子中，`<draggable>` 组件将 `list` 数组绑定到可拖拽列表中。当你拖动列表项时，`list` 数组会自动更新排序。

你还可以使用其他选项和事件来自定义和处理可拖拽列表的行为。更多详细信息和示例可以在 Vue Draggable 的官方文档中找到：https://sortablejs.github.io/Vue.Draggable/