html5拖拽table,Vue+el-table+h5行拖拽

一、需求：

在el-table上拖拽行，并移动到其他行

二、实现：

1.首先在网上找有没有现成的，比如：vuedraggable 和 sortablejs，这两个看起来相当强了，但是不符合我的需求(可能是我不会用😂)

2.用h5自带的拖动事件解决，效果如下：

拖拽移动文件.gif

三、思路:

1.h5 drag 的使用:

非常简单，只要在元素里加入draggable属性，该元素就能被拖动了

需要用到的事件：

被拖拽的元素：

ondragstart: 开始拖拽事件

ondragend: 结束拖拽事件

被拖拽的滑过其他元素的事件：

ondragenter: 拖动进入目标元素事件

ondragleave: 拖动离开目标元素事件

ondragover: 目标元素中拖拽事件

ondrop: 在目标元素中放下的事件

2.结合el-table使用

在table的每个tr标签里插入属性draggable=”true",那么行就能被拖动了

并给每行添加ondragstart事件

let target = document.querySelector('.el-table__body-wrapper tbody');

for (let i = 0; i < target.childElementCount; i++) {

const child = target.children[i]

child.draggable = true

child.ondragstart = function(e){

console.log('child'+i+'开始拖拽');

}

}

3.添加 在目标元素中滑动的事件

这里的目标元素就是tbody

let target = document.querySelector('.el-table__body-wr