实现 Element表格数据拖拽

效果演示：

拖拽演示

话不多说 直接上源码 （代码为测试用代码 存在没有优化的地方）

<template>
  <div>
    <el-table
      :data="receiveList"
      style="width: 100%; margin: 10px 0px"
      :header-cell-style="{ textAlign: 'center' }"
      :cell-style="{ textAlign: 'center' }"
    >
      <el-table-column
        label="当前人员"
        prop="curName"
      >
        <template slot-scope="{row}">
          <span
            class="sp"
            v-for="(item) in row.curName"
            :key="item.id"
            @mousedown.prevent="curToBy(item,row.wId)"
            @mouseup="(curAdd(row.wId))"
          >
            {{ item.name }}
          </span>
          <span
            class="sp"
            v-if="!row.curName.length"
            @mouseup="(curAdd(row.wId))"
          ></span>
        </template>
      </el-table-column>
      <el-table-column
        label="备用人员"
        prop="byName"
      >
        <template slot-scope="{row}">
          <span
            class="sp"
            v-for="item in row.byName"
            :key="item.id"
            @mouseup="(byAdd(row.wId))"
            @mousedown.prevent="byToCur(item,row.wId)"
          >
            {{ item.name }}
          </span>
        </template>
      </el-table-column>
    </el-table>
    <div
      class="mouse movem"
      ref="mouse"
      style="width: 30px; height: 30px; "
    >{{mouseText}}</div>
  </div>
</template>

<script>

export default{
  data () {
    return {
      receiveList: [ // 表数据
        {
          wId: 1,
          curName: [
            {
              id: 1,
              name: 'a'
            }
          ],
          byName: [
            {
              id: 2,
              name: 'b'
            },
            {
              id: 3,
              name: 'c'
            },
            {
              id: 4,
              name: 'd'
            },
          ]
        },
        {
          wId: 2,
          curName: [
            {
              id: 1,
              name: 'a'
            }
          ],
          byName: [
            {
              id: 2,
              name: 'b'
            },
            {
              id: 3,
              name: 'c'
            },
            {
              id: 4,
              name: 'd'
            },
          ]
        },
      ],
      curId: '', // 当前拖拽数据的id
      mouseText: '', // 移动dom中的内容
      hangId: '', // 当前表格行数据的id
      direction: true, // 拖拽顺序
    };
  },
  mounted () {
    window.onmouseup = () => {
      const lenght = this.receiveList[this.hangId].byName.length
      const left = document.querySelectorAll('.el-table__row')[this.hangId].children[1].children[0].children[0].getBoundingClientRect().left
      const right = document.querySelectorAll('.el-table__row')[this.hangId].children[1].children[0].children[lenght - 1].getBoundingClientRect().right
      const top = document.querySelectorAll('.el-table__row')[this.hangId].children[1].children[0].children[0].getBoundingClientRect().top
      const bottom = document.querySelectorAll('.el-table__row')[this.hangId].children[1].children[0].children[0].getBoundingClientRect().bottom

      const leftTwo = document.querySelectorAll('.el-table__row')[this.hangId].children[0].children[0].children[0].getBoundingClientRect().left
      const rightTwo = document.querySelectorAll('.el-table__row')[this.hangId].children[0].children[0].children[0].getBoundingClientRect().right
      const topTwo = document.querySelectorAll('.el-table__row')[this.hangId].children[0].children[0].children[0].getBoundingClientRect().top
      const bottomTwo = document.querySelectorAll('.el-table__row')[this.hangId].children[0].children[0].children[0].getBoundingClientRect().bottom


      const ev = event || window.event;
      if (this.direction) { 
        if (ev.pageX < left || ev.pageX > right || ev.pageY < top || ev.pageY > bottom) { // 判断鼠标抬起时 是否在目标dom范围内
          this.receiveList[this.hangId].curName.push({
            id: this.curId,
            name: this.mouseText
          })
          this.mouseText = ''
          window.removeEventListener('mousemove', this.mvFn)
          return
        }
      } else {
        if (ev.pageX < leftTwo || ev.pageX > rightTwo || ev.pageY < topTwo || ev.pageY > bottomTwo) { // // 判断鼠标抬起时 是否在目标dom范围内
          this.receiveList[this.hangId].byName.push({
            id: this.curId,
            name: this.mouseText
          })
          this.mouseText = ''
          window.removeEventListener('mousemove', this.mvFn)
          return
        }
      }
      this.mouseText = ''
      window.removeEventListener('mousemove', this.mvFn)
    }
  },
  methods: {
    mvFn () {
      // 获取Dom元素位置
      const ev = event || window.event;
      // 设置Dom元素的位置 (使用时需要加上单位px)
      this.$refs.mouse.style.left = ev.pageX + 15 + 'px'
      this.$refs.mouse.style.top = ev.pageY + 'px'
    },
    curToBy (item, id) { // 当前 到 备用
      this.direction = true
      setTimeout(() => { // 处理移动dom所在位置因素的影响
        this.mouseText = item.name
      }, 200)
      this.curId = item.id
      let index = this.receiveList.findIndex((value) => value.wId == id);
      this.hangId = index
      this.receiveList[index].curName.splice(0, 1)
      window.addEventListener('mousemove', this.mvFn)
    },
    byAdd (id) { // 当前 新增
      let index = this.receiveList.findIndex((value) => value.wId == id);
      if (index !== this.hangId) return // 判断是否为同一行数据
      this.receiveList[index].byName.push({
        id: this.curId,
        name: this.mouseText
      })
    },
    byToCur (item, id) { // 备用 到 当前
      this.direction = false
      setTimeout(() => { // 处理移动dom所在位置因素的影响
        this.mouseText = item.name
      }, 200)
      this.curId = item.id
      let index = this.receiveList.findIndex((value) => value.wId == id);
      let byIndex = this.receiveList[index].byName.findIndex((value) => value.id == item.id)
      this.hangId = index
      this.receiveList[index].byName.splice(byIndex, 1)
      window.addEventListener('mousemove', this.mvFn)
    },
    curAdd (id) { // 备用 新增
      let index = this.receiveList.findIndex((value) => value.wId == id);
      if (index !== this.hangId) return // 判断是否为同一行数据
      if (this.receiveList[index].curName.length >= 1) { // 判断当前数据长度
        this.receiveList[this.hangId].byName.push({
          id: this.curId,
          name: this.mouseText
        })
        return
      }
      this.receiveList[index].curName.push({
        id: this.curId,
        name: this.mouseText
      })
    },
  },
};
</script>

<style lang="scss">
.sp {
  display: inline-block;
  width: 20px !important;
  height: 20px !important;
}

.movem {
  position: absolute;
}
</style>