1.给每一列添加:draggable=“true”
<ul>
<li v-for="(item,index) in listData"
:key="index"
:draggable="true"
@dragenter.prevent
@dragover.prevent
@dragstart="dragStart(index)"
@dragenter="dragEnter(index)"
@dragend="dragEnd"
>
<span>{{ item.label}}</span>
</li>
</ul>
<script lang="ts">
import {defineComponent,defineAsyncComponent,reactive} from "vue";
export default defineComponent({
setup() {
const state = reactive<any>({
listData: [],
dragIndex: null
});
function dragStart(index:any){
state.dragIndex = index;
}
function dragEnter(index:any){
if (state.dragIndex !== index) {
const source = state.listData[state.dragIndex];
state.listData.splice(state.dragIndex, 1);
state.listData.splice(index, 0, source);
state.dragIndex = index;
}
}
function dragEnd(){
console.log(state.listData,'listData')
//再调接口将listData传给后端即可。
}
return {
...toRefs(state),
dragStart,
dragEnter,
dragEnd
};
},
});
</script>
2.使用sortablejs, row-key为唯一标识
npm i sortablejs
<template>
<el-table :data="sortTable" row-key="pkId">
<el-table-column label="名称" prop="labelName"></el-table-column>
</el-table>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive } from 'vue';
import Sortable from 'sortablejs';
export default defineComponent({
setup() {
const state = reactive({
sortTable: [],
});
onMounted(() => {
rowDrop();
});
function rowDrop() {
const tbody = document.querySelector('.el-table .el-table__body-wrapper tbody') as HTMLElement;
Sortable.create(tbody, {
animation: 150,
delay: 0,
// 结束拖拽后的回调函数
onEnd: (evt: { newIndex: any; oldIndex: any }) => {
const currentRow = state.sortTable.splice(evt.oldIndex, 1)[0];
state.sortTable.splice(evt.newIndex, 0, currentRow);
},
});
}
return {
...toRefs(state),
rowDrop,
};
},
});
</script>