vue实现拖拽表格_仿拖拽实现两个表格之间的行拖拽(A-&gt；B)和拖拽到某一个单元格

1.从需求出发,一个页面有两个表格 right 和left,要把left表格的选择行的数据 拖拽到right的某一行上某个单元格,鼠标松开时,组装right的表格数据
2.如何实现,在left表格上按下改变鼠标样式,在right表格上鼠标抬起时获取left表格的勾选行数据和right鼠标当前行的数据,最后是鼠标抬起时恢复鼠标的样式.
首先在left表格上监听鼠标按下事件

const that =this
const leftTable=this.$refs.leftTable.$el
const rightTable=this.$refs.rightTable.$el
// 左边表格
leftTable.onmousedown = function(event) { // 按下鼠标时，初始化处理
      // 记录在left表格上按下了鼠标
      that.leftTableDown = true
      // 修改鼠标样式为移动图片(自行去网上找个图片就行了)
      document.body.style.cursor = `url(${that.imgUrl}) 12 12,pointer`
}
// 右边表格
// 鼠标抬起事件
rightTable.onmouseup=function(event){
      if(that.leftTableDown){// 在left上按下了鼠标
        const pathDom = event.path.find(x => {
          if (x.localName === 'tr') return x
        })
        if (!pathDom) {
          that.$message.error('请拖放在表格行上')
          return
        }
        const rowIndex = pathDom.rowIndex
        //在这里可以处理right数据组装逻辑,获取左边表格勾选行数据和右边表格当前行数据
        //注意：匹配的话，只能用event中有的值
        that.$message.success(`落在了第: ${rowIndex + 1}行!`)
      }
}
// 鼠标抬起时鼠标样式还原
document.onmouseup = function(event) {
      document.body.style.cursor = 'auto'
}
// 鼠标移动时会复制文字 如果想禁用复制,则加入一下代码
rightTable.onselectstart = function() {
      return false
    }
leftTable.onselectstart = function() {
      return false
    }