vuedraggable方法

`vuedraggable` 是一个 Vue.js 组件，用于实现拖放排序。它基于 Sortable.js 库，提供了一些自定义选项和事件。

下面是一些常用的 `vuedraggable` 方法：

1. `v-model`：用于绑定数据，可以是数组或对象。
2. `:options`：对象类型，用于覆盖 Sortable.js 的默认选项。
3. `@start`：拖拽开始时触发的事件。
4. `@end`：拖拽结束时触发的事件。
5. `@add`：拖拽元素添加到列表中时触发的事件。
6. `@remove`：拖拽元素从列表中移除时触发的事件。
7. `@update`：拖拽元素在列表中排序时触发的事件。

下面是一个简单的示例：

<template>
  <div>
    <div v-for="(item, index) in list" :key="index">{{ item }}</div>
    <draggable v-model="list" @end="onEnd">
      <div v-for="(item, index) in list" :key="index">{{ item }}</div>
    </draggable>
  </div>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  components: {
    draggable,
  },
  data() {
    return {
      list: ['apple', 'banana', 'orange', 'grape'],
    };
  },
  methods: {
    onEnd(event) {
      console.log(event);
    },
  },
};
</script>

在上面的示例中，我们创建了一个列表，使用 `v-for` 渲染了两次，一次是用于展示列表，另一次是用于拖拽排序。我们将数据绑定到 `draggable` 组件上的 `v-model` 中，这样改变排序后的列表顺序，数据也会同步更新。在拖拽结束时，我们通过 `@end` 事件获取 Sortable.js 提供的事件对象，可以查看控制台输出的内容。