拖拽技术方案调研

结论：简单的同类拖拽使用sortable.js或vuedraggable即可，不同类型拖拽可以选择vue3-dnd

1、sortable.js

相关文档：

http://www.sortablejs.com/options.html
https://www.itxst.com/sortablejs/2unzu363.html
优点：

用法简单、广泛，文档清晰
拖拽中样式通过类名直接修改、拖拽回调处理数据逻辑清晰
缺点：

直接拖拽dom，通过回调处理数据
不同类型拖拽需要删除已拖拽dom，重新创建或通过数据创建相应dom（可能会有dom闪烁的情况）
2、vuedraggable

相关文档：

https://www.npmjs.com/package/vuedraggable
https://www.itxst.com/vue-draggable/fiamvqam.html0
优点：

基于sortable的封装、使用广泛、文档清晰
封装成标签的形式，具体属性与sortable相似
缺点：

同sortable
3、vue3-dnd

相关文档：

https://haochenguang.gitee.io/vue3-dnd/guide/
优点：

可以进行值传递而不直接改变dom
不局限于同类型脱拽
缺点：

DndProvider必须在父级组件调用
拖拽元素不能是v-for, 如果重复则只有最后一个可以拖拽，可以封装成组件调用
拖动过程中无法使用指定样式，只能通过定义一层
因为是数据传递，不改变dom所以拖拽到的位置需要自行计算（而且提供的api返回的位置是相对浏览器left\top，需要在hover方法中获取元素对应浏览器位置进行计算）
因为插件刚出来3个月，下载量>1还始于1个月前，坑多、用法复杂、大部分功能需要在官方文档-案例-代码中寻找用法

4、原生js-dragger

相关文档：

https://developer.mozilla.org/zh-CN/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations
优点：

更加灵活，支持数据拖拽、dom拖拽
缺点：

拖拽监听需要使用addEventListener，无法使用onDragstart绑定，用法复杂
拖拽样式处理、可以被拖拽到的区域判断未进行封装，比较复杂
5、vue-dnd

相关文档：

https://github.com/lain-dono/vue-dnd#readme
http://jsfiddle.net/lain8dono/mrnyf79e/
优点：

通过拖拽指令进行拖拽
缺点：

github更新追溯到2016年了，也没有找到相关文档
试了一下，对于vue3支持度并不理想（也可能是我没找对用法）

6、vue3-smooth-dnd

相关文档：

https://github.com/gilnd/vue3-smooth-dnd
https://www.jb51.net/article/218324.htm
Vue 2 版本的所有文档也适用于这个包版本

7、vue.draggable.next

相关文档：

https://github.com/SortableJS/vue.draggable.next

描述：

完全支持 Sortable.js 功能：
支持触控设备
支持拖动手柄和可选文本
智能自动滚动
支持不同列表之间的拖放
没有 jQuery 依赖
保持同步 HTML 和查看模型列表
兼容 Vue.js 3.0 转换组 取消支持 需要完全控制时报告任何更改的事件