vue3 draggable 拖拽排序

对于Vue 3中的可拖拽排序，你可以使用Vue.Draggable库来实现。首先，在你的项目中安装该库：

npm install vuedraggable

然后，在需要使用拖拽排序的组件中，引入并注册Vue.Draggable：

import draggable from 'vuedraggable'

export default {
  components: {
    draggable
  },
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5']
    }
  }
}

在模板中，使用`draggable`标签来包裹你想要进行拖拽排序的元素列表：

<template>
  <div>
    <draggable v-model="items" :options="{ handle: '.handle' }">
      <div v-for="(item, index) in items" :key="index" class="handle">
        {{ item }}
      </div>
    </draggable>
  </div>
</template>

在上面的例子中，`items`数组存储了需要排序的元素，`v-model="items"`将其与Vue.Draggable绑定起来。通过设置`:options="{ handle: '.handle' }"`，你可以指定一个句柄（handle）元素，只有点击句柄才能触发拖拽。

这样，你就可以实现Vue 3中的可拖拽排序了。希望对你有所帮助！