vue实现拖拽表格_仿拖拽实现两个表格之间的行拖拽(A->B)

1、从需求出发,一个页面有两个表格 right 和left,要把left表格的选择行的数据 拖拽到right的某一行上,鼠标松开时,发起一个请求,然后刷新页面

接下来一步一步拆分需求?

分析:由于vue是MVVM模式, 原生的拖拽是操作的dom,有点相违背. 想要转移到在数据驱动这个上面来, 于是产生了改变鼠标样式的想法.

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 = tr