vue2 elementUI table拖拽功能实现

1、html部分

          <el-table
            :data="associationList"
            style="width: 100%"
            @selection-change="temSelectionChange"
            v-loading="loading"
            row-class-name="drag-row"
            @row-contextmenu.prevent
          >
            <el-table-column type="selection" width="55" />
          </el-table>

2、js部分

  data() {
    return {
      associationList: [], // table数据自行添加
    };
  },
  mounted() {
    // 组件挂载后添加拖拽事件
    this.addDragEvents();
  },
  updated() {
    // 数据更新后重新添加拖拽事件
    // 使用 this.$nextTick 获取表格行的 DOM 元素
    this.$nextTick(() => {
      this.addDragEvents();
    });
  },
  
  methods: {
    /** 拖拽事件start */
    // 添加拖拽事件
    addDragEvents() {
      // 获取所有带有类名 'drag-row' 的表格行
      const rows = document.querySelectorAll('.drag-row');
      // 遍历每一行，添加拖拽事件
      rows.forEach((row, index) => {
        row.draggable = true; // 设置行元素为可拖拽
        // 开始拖拽时的事件处理
        row.ondragstart = (event) => this.handleDragStart(event, index);
        // 拖拽经过时的事件处理
        row.ondragover = (event) => this.handleDragOver(event);
        // 拖拽放下时的事件处理
        row.ondrop = (event) => this.handleDrop(event, index);
      });
    },
    // 处理拖拽开始事件
    handleDragStart(event, index) {
      this.draggingIndex = index; // 记录当前拖拽行的索引
      event.dataTransfer.effectAllowed = 'move'; // 设置拖拽效果为移动
      event.dataTransfer.setData('text/plain', index); // 将索引存储到拖拽数据中
    },
    // 处理拖拽经过事件
    handleDragOver(event) {
      event.preventDefault(); // 阻止默认事件，允许放置
      event.dataTransfer.dropEffect = 'move'; // 设置拖拽效果为移动
    },
    // 处理拖拽放下事件
    handleDrop(event, targetIndex) {
      const sourceIndex = this.draggingIndex; // 获取开始拖拽时记录的索引
 
      // 如果源索引和目标索引相同，直接返回
      if (sourceIndex === targetIndex) return;
 
      // 创建项目列表的副本
      const associationList = [...this.associationList];
      // 删除源位置的项目，并存储被拖拽的项目
      const [movedItem] = associationList.splice(sourceIndex, 1);
      // 在目标位置插入被拖拽的项目
      associationList.splice(targetIndex, 0, movedItem);
      console.log('拖动前',JSON.stringify(this.associationList),'拖动后',JSON.stringify(associationList));
      
      // 更新项目列表数据
      this.associationList = associationList;
      this.draggingIndex = null; // 重置拖拽索引
    },
    /** 拖拽事件end */
  }

3、css部分

/* 自定义拖拽行样式 */
.drag-row {
  cursor: move;
  user-select: none;
}
.drag-row:hover {
  background-color: #f0f9ff;
}

效果