VueDraggablePlus基于Sortablejs 的Vue 的拖拽库，支持组件、hooks、指令三种使用方式

特性

• 功能齐全：全面继承 Sortable.js 的所有功能
• 无缝迁移：适用于 Vue 3 和 Vue2
• 灵活使用：支持组件、指令、函数式调用
• 类型强：用 TypeScript 编写，带有完整的 TS 文档
• 双向绑定：支持 v-model 双向绑定
• 自定义容器：将指定容器作为拖拽容器

使用方式 vue3为例

<template>
  <VueDraggable class="drag" v-model="list" :options="{ animation: 200 }">
    <template #item="{ element }">
      <div class="draggable-item">{{ element.name }}</div>
    </template>
  </VueDraggable>
</template>
<script setup>
  import { onMounted, reactive, ref } from 'vue'
  import VueDraggable from 'vuedraggable'
  const list = ref([
    {
      id: 1,
      name: '测试1'
    },
    {
      id: 2,
      name: '测试2'
    },
    {
      id: 3,
      name: '测试3'
    },
    {
      id: 4,
      name: '测试4'
    },
    {
      id: 5,
      name: '测试5'
    }
  ])
</script>