关于vue3实现拖拽

最近在写一个关于vue拖拽的功能，那么像之前我们在react项目中可以直接使用React-Draggable来完成拖拽需求。所以在写这个需求时，我在想vue中有没有类似的相关库。

经过一番查阅，终于找到了相关的组件库，也就是vue-draggable-plus。

那我们话不多说，开整。

---

1.首先我们需要安装vue-draggable-plus

npm i vue-draggable-plus

2.我们需要一个list列表，在这里我用的是后端的数据，也就不做多展示

3.实现代码

---

4.在VueDraggable中也配置了一些属性。VueDraggable也可以做一些像表格拖拽，列表拖拽等等

animation	拖动时显示动画
disabled	是否禁止拖拽
draggable	指定元素内的哪些项目应该是可拖动的
group	要将元素从一个列表拖到另一个列表中，两个列表必须具有相同的group 值。您还可以定义列表是否可以被移出、或者克隆以及接收其他列表元素。详情查阅上方 TS 类型定义
sort	定义列表单元是否可以在列表容器内进行拖拽排序

---

5.大家可以根据自己的需求去VueDraggablePlus | 支持 Vue2 和 Vue3 的拖拽组件 (vue-draggable-plus.pages.dev)官方文档查阅相应的属性。

6.下面这是Sortable.js 的文档，如果有什么更多的需求，这个文档也是可以查阅的

Sortable.js中文网|配置 (sortablejs.com)