Vue 实现拖拉拽组件 vue-draggable-plus

vue-draggable-plus 是一个基于 Sortable.js 的 Vue 拖拽组件库，是 vuedraggable 的升级替代品，支持 Vue 2 和 Vue 3，功能更强，类型更完善，维护更活跃。

---

特点

• 同时支持 Vue 2 和 Vue 3
• 完整类型支持（TypeScript）
• 拖拽排序、嵌套列表、拖入拖出
• 基于原生 Sortable.js，功能丰富
• 支持 v-model 双向绑定

---

安装

npm install vue-draggable-plus

---

Vue 2 使用方式

1. 引入并注册组件：

// main.js
import Vue from 'vue'
import VueDraggablePlus from 'vue-draggable-plus'

Vue.use(VueDraggablePlus)

2. 使用组件：

---

常用属性

属性	类型	说明
v-model	Array	绑定列表数据
group	String	设置拖拽组，实现跨列表拖拽
sort	Boolean	是否允许排序（默认 true）
disabled	Boolean	是否禁用拖拽
clone	Function	拖拽克隆元素时的处理函数
itemKey	String	指定每一项的唯一键

---

备注：组件最低配置要求是 Vue2.7（含）以上版本。

官方文档

GitHub地址：https://github.com/Alfred-Skyblue/vue-draggable-plus?tab=readme-ov-file
中文手册地址：https://vue-draggable-plus.pages.dev/guide/