一萨脑、需求：

在el-table上拖拽行淮韭，并移動到其他行

二裁僧、實現(xiàn)：

1.首先在網上找有沒有現(xiàn)成的财搁，比如：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;//行數(shù)
      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中的每一元素都會觸發(fā)該事件, 但是我們只需要它正在那一行上就行了
        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){
              // 清除上次進入的容器的狀態(tài)
              const last = target.children[dragIndex];
              clearClass(last)
            }
            // console.log('拖動進入目標元素'+selectRow.rowIndex);
            // 不是自己或未文件夾時才改變狀態(tài)
            if(draggedIndex !== throughRow.rowIndex && _this.fileList[throughRow.rowIndex].isFolder){
              // 改變本次進入的容器的狀態(tài)
              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);
        // 清除上次進入的容器的狀態(tài)
        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'
      }

    }