拖拽排序

在Vue.js中实现拖拽排序通常涉及以下几个步骤：

1. 数据结构： 定义一个数组，存储需要排序的元素。
2. 拖拽事件处理： 使用Vue的指令（v-on）来监听拖拽事件，如dragstart、dragover和drop。
3. 数据更新： 在拖拽结束时更新数据，然后通知Vue重新渲染。

代码示例

<div
  v-for="(item, index) in table"
  :key="index"
  :draggable="true"
  @dragstart="dragStart(index, $event)"
  @dragover.prevent="dragOver(index, $event)"
  @drop="drop(index)"
  :class="{ draggable: true, dragging: draggingIndex === index }"
>
  <el-card shadow="hover"> 
    {{ item.tprd_name }}
  </el-card>
</div>

data() {
    return {
        draggingIndex: null,
        table: [
            {
                id: 1,
                tprd_name: 'zs'
            },
            {
                id: 2,
                tprd_name: 'ls'
            },
        ]
    }
}
methods: {
    // 拖拽开始
    dragStart(index, event) {
      this.draggingIndex = index;
      event.dataTransfer.effectAllowed = "move";
      event.dataTransfer.setData("text/plain", index);
    },
    // 拖拽结束
    dragOver(index, event) {
      event.dataTransfer.dropEffect = "move";
      if (index !== this.draggingIndex) {
        // Swap the elements in the array
        const draggedItem = this.table[this.draggingIndex];
        this.table.splice(this.draggingIndex, 1);
        this.table.splice(index, 0, draggedItem);
        this.draggingIndex = index;
      }
    },
    drop() {
      this.draggingIndex = null;
    },
}

.draggable {
  padding: 5px 10px;
  cursor: grab;
  user-select: none;
}
.dragging {
  opacity: 0.5;
}

效果展示

我在项目中是为了做表格排序（因为我的表格是公司基于el-table封装的，不好做修改所以才这样实现）