一、需求：
在el-table上拖拽行，并移动到其他行
二、实现：
1.首先在网上找有没有现成的，比如：vuedraggable 和 sortablejs，这两个看起来相当强了，但是不符合我的需求(可能是我不会用😂)
2.用h5自带的拖动事件解决，效果如下：
拖拽移动文件.gif
三、思路:
1.h5 drag 的使用:
非常简单，只要在元素里加入draggable属性，该元素就能被拖动了
<div draggable="true"><div>
需要用到的事件：
被拖拽的元素：
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-wrapper tbody');
target.ondragleave = function(e){
console.log('拖动进入目标元素');
}
target.ondragleave = function(e){
console.log('拖动离开目标元素');
}
target.ondragover = function(e){
console.log('目标元素中拖拽...');
e.preventDefault();
}
target.ondragover = function(e){
console.log('在目标元素放下了’);
}
4.js完整代码
// 行拖拽
rowDrop() {
const _this = this
// 被拖动的元素的索引
let dragged = null;
// 被拖动的元素的索引
let draggedIndex = -1;
// 目标元素
let target = document.querySelector('.el-table__body-wrapper tbody');
let rows = 0;//行数
setTimeout(function () {
rows = target.childElementCount
for (let i = 0; i < target.childElementCount; i++) {
const child = target.children[i]
child.draggable = true
// child.style.cursor = 'copy'
child.ondragstart = function(e){
dragged = e.path[0]
draggedIndex = e.path[0].rowIndex
console.log('child'+i+'开始拖拽');
_this.cellMouseIndex = -1
dragged.style.cursor = 'grabbing'
}
child.ondragend = function(){
console.log('child'+i+'拖拽结束');
}
}
},0)
// 被拖动的元素正在那个容器里
let dragIndex = -1
target.ondragenter = function(e){
clearTimeout(loop)
// 由于被拖动的元素 经过tbody中的每一元素都会触发该事件, 但是我们只需要它正在那一行上就行了
if(e.path[0].tagName === 'TD'){
// throughRow 表示被拖动的元素正在哪一行上
const throughRow = e.path.find(path => {
if(path.className === 'el-table__row'){
return path
}
})
if(dragIndex !== throughRow.rowIndex){
if(dragIndex > -1){
// 清除上次进入的容器的状态
const last = target.children[dragIndex];
clearClass(last)
}
// console.log('拖动进入目标元素'+selectRow.rowIndex);
// 不是自己或未文件夹时才改变状态
if(draggedIndex !== throughRow.rowIndex && _this.fileList[throughRow.rowIndex].isFolder){
// 改变本次进入的容器的状态
dragged.style.cursor = 'copy'
throughRow.style.height = 60+'px'
throughRow.style.backgroundColor = '#e9fdcf'
}
dragIndex = throughRow.rowIndex
}
}
leaveIndex = -1
}
target.ondragover = function(e){
// console.log('目标元素中拖拽...');
e.preventDefault();
leaveIndex = -1
}
let loop = null
let leaveIndex = -1 // 是否拖出了整个table, -1表示还在table内
target.ondragleave = function(e){
clearTimeout(loop)
if(e.path[0].tagName === 'TD'){
const throughRow = e.path.find(path => {
if(path.className === 'el-table__row'){
return path
}
})
if(dragIndex !== throughRow.rowIndex){
// console.log('拖动离开目标元素'+selectRow.rowIndex);
// selectRow.style.height = 'unset'
// selectRow.style.backgroundColor = '#fff'
// dragIndex = selectRow.rowIndex
}
if(throughRow.rowIndex === 0 || throughRow.rowIndex === rows-1){
// 离开第一行或最后一行
leaveIndex = throughRow.rowIndex
loop = setTimeout(function () {
if(leaveIndex > -1){
console.log("离开了",leaveIndex)
const leave = target.children[leaveIndex];
clearClass(leave)
dragIndex = -1
}
},100)
}``
}
}
target.ondrop = function(){
console.log('放下了'+draggedIndex);
// 清除上次进入的容器的状态
const last = target.children[dragIndex];
clearClass(last)
dragged.style.cursor = 'default'
const form = _this.fileList[draggedIndex]
const to = _this.fileList[dragIndex]
if(last && form.id !== to.id && to.isFolder){
// 移动文件/文件夹
_this.copyOrMoveApi('move', form.id, to.id)
// let fileType = '文件'
// if(form.isFolder){
// fileType = '文件夹'
// }
// _this.$confirm('是否将'+fileType+'否移动到 "' + to.name + '"?', '提示', {
// confirmButtonText: '确定',
// cancelButtonText: '取消',
// type: 'info'
// }).then(() => {
// _this.copyOrMoveApi('move', form.id, to.id)
// }).catch()
}
}
let clearClass = function (node) {
if(node){
node.style.height = 'unset'
node.style.backgroundColor = '#fff'
}
dragged.style.cursor = 'grabbing'
}
}
