vue实现拖拽排序

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>