elementUITable组件实现拖拽效果
背景
使用element ui table+vue实现表格的拖拽。在github上搜索了下发现sortable这款插件挺不错的，star14000+，而且还支持vue等多种主流的前端框架，可谓是十分的强大。最重要的原因是，完全不依赖jq。
vue.draggable，vue版本的sortable。拖拽后能够使数据模型同步，完美兼容vue的数据视图双向绑定。
下面贴一下官方demo
看得出来真的很强大。数据实时的响应同步，结合vue我们根本不需要对数据进行复杂的逻辑处理。
准备
安装依赖
npm i -s vuedraggable
vuedraggable依赖 sortable.js，所以下载了vuedraggable，我们便可以直接引入sortable使用sortable的特性。
vuedraggable是sortable一种加强，实现组件化的思想，可以结合vue，使用起来更方便。
sortable使用
在这里我们还是使用一句sortable的构建方式
import sortable from 'sortablejs';
导入sortable类，创建拖拽函数
drag() {
const el = document.queryselectorall('.el-table__body-wrapper > table > tbody')[0];
sortable.create(el, {
disabled: !this.enabledrag,
ghostclass: 'sortable-ghost',
setdata: function(datatransfer) {
datatransfer.setdata('text', '');
},
onend: (evt) => {
}
});
},
我们在数据加载完成之后，就调用drag()方法来开启拖拽功能。
介绍下几个参数的作用：
el 代表我们要侦听拖拽响应的dom对象
disabled 是否开启拖拽
ghostclass 拖拽时可以给加上样式
setdata 回调html5 dragevent的datatransfer`对象，来设置显示的数据
onend 结束拖拽后的回调函数，evt包含oldindex，newindex等一系列属性。
完整属性列表
演示