表格
<div class="main_table"><el-table id="elTableid" :data="fieldArr" border style="width: 100%" row-class-name="drag-row"current-row-key highlight-current-row><el-table-column type="index" label="序号" width="60" align="left"></el-table-column><el-table-column prop="infoName" label="显示名" align="left" show-overflow-tooltip></el-table-column><el-table-column prop="infoVal" label="显示内容" align="left" show-overflow-tooltip></el-table-column></el-table></div>第一种：利用Sortable.js
1、index.html文件
<script type="text/javaScript" src="https://cdn.bootcdn.net/ajax/libs/Sortable/1.15.0/Sortable.min.js"></script>
methods: { startSortable() {// 复制表格元素一份let fieldArrSort = []let that = this// 调用Sortable.create方法创建排序实例，传入表格元素和配置项const el = document.querySelector('#elTableid .el-table__body-wrapper table tbody')Sortable.create(el, {animation: 150,fallbackOnBody: true,ghostClass: '.blue-background-class',// 当用户选择一个元素准备拖动时触发（鼠标按下或触摸开始）。onChoose: function (evt) {this.fieldsBase = falsefieldArrSort = []// 将fieldArr的值复制给fieldArrSortfieldArrSort = JSON.parse(JSON.stringify(that.fieldArr))},//开始拖拽onStart: function (evt) {const item = evt.item; // 被拖动的元素item.style.backgroundColor = '#CBECFB'; // 设置背景色},// 当排序过程中元素位置发生变化时触发开始拖拽onSort: function (evt) {},//结束拖拽onEnd: function (evt) {let newIndex = evt.newIndex // 排序后的索引位置let oldIndex = evt.oldIndex // 排序前的索引位置let moveData = fieldArrSort[oldIndex]fieldArrSort.splice(oldIndex, 1)fieldArrSort.splice(newIndex, 0, moveData)const item = evt.item; // 被拖动的元素item.style.backgroundColor = ''; // 设置背景色 // fieldArr真的需要清除（重点）that.fieldArr = []that.$nextTick(() => {that.fieldArr = fieldArrSort});},})},
},mounted() {// 使用 this.$nextTick 获取表格行的 DOM 元素this.$nextTick(() => {this.startSortable();});},
第二种：利用Dom的 draggable事件
methods: {
// 添加拖拽事件addDragEvents() {// 获取所有带有类名 'drag-row' 的表格行this.rows = document.querySelectorAll('.drag-row');// 遍历每一行，添加拖拽事件this.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'; // 设置拖拽效果为移动// this.rows[this.draggingIndex].style.backgroundColor = '#CBECFB'; // 重置拖拽行的背景色},// 处理拖拽放下事件handleDrop(event, targetIndex) {// this.rows[this.draggingIndex].style.backgroundColor = ''; // 重置拖拽行的背景色const sourceIndex = this.draggingIndex; // 获取开始拖拽时记录的索引// 如果源索引和目标索引相同，直接返回if (sourceIndex === targetIndex) return;// 创建项目列表的副本const fieldArr = [...this.fieldArr];// 删除源位置的项目，并存储被拖拽的项目const [movedItem] = fieldArr.splice(sourceIndex, 1);// 在目标位置插入被拖拽的项目fieldArr.splice(targetIndex, 0, movedItem);// 更新项目列表数据this.fieldArr = fieldArrthis.draggingIndex = null; // 重置拖拽索引},},mounted() {// 使用 this.$nextTick 获取表格行的 DOM 元素this.$nextTick(() => {this.addDragEvents();});},updated() {// 数据更新后重新添加拖拽事件this.$nextTick(() => {this.addDragEvents();});},
