可以用原生的dragstart、drag、dragend、dragover、drop、dragleave实现这个效果，但是有现成的轮子就不要重复造了，看效果：
<template>
<el-table :class="$options.name" :data="tableData" ref="table" row-key="ID">
<!-- 注意：必须要定义row-key="ID"，否者会导致拖拽顺序错乱 -->
<el-table-column type="index" label="序号" width="60" />
<el-table-column prop="label" label="列名">
<template slot-scope="scope">
<el-link :type="scope.row.type" :underline="false">{{ scope.row.label }}</el-link>
</template>
</el-table-column>
</el-table>
</template>
<script>
import sortablejs from "sortablejs"; //npm install sortablejs --save
export default {
name: "dragTableRow",
data() {
return {
tableData: [
{ ID: 1, value: 1, label: "显示文本1", type: `primary` },
{ ID: 2, value: 2, label: "显示文本2", type: `success` },
{ ID: 3, value: 3, label: "显示文本3", type: `warning` },
{ ID: 4, value: 4, label: "显示文本4", type: `danger` },
{ ID: 5, value: 5, label: "显示文本5", type: `info` },
],
};
},
mounted() {
this.initDragSortTableRow(); //拖拽表格行排序
},
methods: {
initDragSortTableRow() {
let el = this.$refs.table.$el.querySelectorAll(
".el-table__body-wrapper > table > tbody"
)[0];
sortablejs.create(el, {
ghostClass: "ghostClass", //定义拖拽的时候接触到的行样式
setData: (dataTransfer) => {
dataTransfer.setData("自定义传参字段", "传输内容");
},
onEnd: (e) => {
this.$g.array.moveArrayElement(this.tableData, e.oldIndex, e.newIndex); //修改数组的顺序
console.log(e.originalEvent.dataTransfer.getData("自定义传参字段"));
},
});
},
},
};
</script>
<style lang="scss" scoped>
.dragTableRow {
>>> .ghostClass {
background-color: #ecf5ff;
td {
border-bottom-color: #409eff;
}
}
}
</style>
