vue3-draggable 拖拽排序

你可以使用vue3-draggable库来实现拖拽排序功能。首先，你需要安装该库：

npm install vue3-draggable

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

import { defineComponent } from 'vue';
import { Draggable } from 'vue3-draggable';

export default defineComponent({
  components: {
    Draggable,
  },
});

接下来，你可以在模板中使用Draggable组件来实现拖拽排序。例如，如果你有一个数组items，你可以使用v-for指令渲染列表，并且将Draggable组件应用于每个列表项：

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

在这个例子中，通过v-model指令将数组items与Draggable组件绑定起来，这样当用户拖拽列表项时，数组的顺序也会相应地改变。

你可以根据需要自定义拖拽排序的行为，例如设置拖拽的边界、限制只能在特定区域内拖拽等等。详细的用法可以参考vue3-draggable的文档。