Vue+el-table+h5行拖拽

一、需求：

在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'
      }

    }