Vue element表格实现拖动排序

最近在项目中表格列表需要实现拖动排序，用到的是 sortable.js 这款插件，是一款优秀的js拖拽库，不依赖jQuery。支持 Meteor、AngularJS、React、Vue、Knockout框架和任何CSS库，如Bootstrap、Element UI。可以用来拖拽div、table等元素。

安装：

npm install sortablejs

然后在 js 中引入这个插件：

import Sortable from "sortablejs"

表格加上 row-key 和 ref：

<el-table row-key="tableData" ref="singleTable" :data="list" style="width: 100%;">

注：row-key 写不正确可能会出现一些BUG，唯一就可以

具体实现：

mounted(){
	this.dragSort();
},
methods:{
	//表格拖动排序
	dragSort() {
		const el = this.$refs.singleTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0]
		this.sortable = Sortable.create(el, {
			onEnd: e => {	//onEnd是结束拖拽时触发，onUpdate是列表内元素顺序更新的时候触发，更多请看文末配置项
				//e.oldIndex为拖动一行原来的位置，e.newIndex为拖动后新的位置
				const targetRow = this.tableData.splice(e.oldIndex, 1)[0];
				this.tableData.splice(e.newIndex, 0, targetRow);
				let dragId = this.tableData[e.newIndex].id;//拖动行的id
				let oneId,twoId
				//拖动行的前一行
				if( this.tableData[e.newIndex-1]){
					oneId = this.tableData[e.newIndex-1].id;
				}else {
					oneId = ""
				}
				//拖动行的后一行
				if( this.tableData[e.newIndex+1]){
					twoId = this.tableData[e.newIndex+1].id;}
				else {
					twoId = ""
				}
				console.log("拖动行："+dragId);
				console.log("前一行："+oneId);
				console.log("后一行："+twoId);
				//然后就可以发送请求了......
			}
		})
	}
					
}

配置项：

http://www.sortablejs.com/options.html 可以更改排序动画时间、自定义影子样式、指定拖动元素、多列表同组等等

其他：

如果使用的不是表格，而是以 v-for 的形式生成的动态数据，并且出现了排序混乱等BUG，可以尝试把数据源换成原本数据源的副本看看，注意不是基本类型要用深拷贝