vue3 Draggable

Vue3 Draggable 是一个基于 Vue 3 和 Sortable.js 的可拖拽组件库。它提供了一种简单的方法来创建可拖拽的列表，并且可以轻松地与 Vue 组件集成。使用 Vue3 Draggable，你可以实现拖拽排序、拖拽移动、拖拽交换等功能。同时，Vue3 Draggable 还提供了丰富的配置选项，可以满足不同的需求。

使用 Vue3 Draggable，你需要先安装 Sortable.js 和 Vue3 Draggable：

npm install sortablejs vue3-draggable

然后在你的 Vue 组件中引入它：

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

<script>
import { defineComponent } from 'vue'
import draggable from 'vue3-draggable'

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

这样就可以创建一个可拖拽的列表了。你可以通过配置选项来实现更多的功能，具体可以参考 Vue3 Draggable 的官方文档。