vue3 中使用vue.draggable实现element-ui table 行、列拖拽

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第29天，点击查看活动详情

前言

最近在项目中碰到了element-ui 列表行、列拖拽的需求，就去找想找一个成熟的解决方法。但发现vue3的比较少，所以就把这个分享了出来，希望可以帮助到大家。

vue.draggable

vue.draggable是一款vue3的拖拽插件,是基于Sortable.js实现的，可以用它来拖拽列表、菜单、工作台、选项卡等常见的工作场景。

安装

npm i -S vuedraggable@next

属性及方法

• delay：number 定义鼠标选中列表单元可以开始拖动的延迟时间；
• animation：number 单位：ms，定义排序动画的时间；
• draggable：selector 格式为简单css选择器的字符串，定义哪些列表单元可以进行拖放;
• onEnd：function 列表单元拖放结束后的回调函数;