element+sortablejs插件实现拖拽排序效果

背景
1、后台管理系统中表格需要实现行拖拽功能
2、表格使用element组件库中el-table

方案介绍

1. Sortable.js
   介绍：Sortable.js是一款轻量级的拖放排序列表的js插件
   引用自官方文档：No jQuery required. Supports Meteor, AngularJS, React, Polymer, Vue, Knockout and any CSS library, e.g. Bootstrap.
   参考地址： https://github.com/SortableJS/Sortable

2. vuedraggable
   介绍：基于Sortable.js的vue组件，用以实现拖拽功能
   引用自官方文档：Vue drag-and-drop component based on Sortable.js
   参考地址： https://github.com/SortableJS/Vue.Draggable

遇到的问题
在使用vuedraggable的过程中，发现必须用包裹拖动项的父级元素，但是element组件库对table进行封装，无法直接包裹拖动项（即tr）的父级元素

如果你的项目中，表格未使用组件库，实现可以参考 https://www.jb51.net/article/162648.htm

解决方案
使用 sortable.js
步骤一： 安装

npm install sortablejs --save

步骤二：引入（在main中全局引入或者需要的组件页面引入）

import Sortable from 'sortablejs' //按需引入

步骤三： el-table 添加row-key属性

步骤四 ： 将拖拽元素设置为要拖动项的父级元素

mounted() {
	// 表格中需要实现行拖动，所以选中tr的父级元素
	const table = document.querySelector('.el-table__body-wrapper tbody')
	const self = this
	Sortable.create(table, {
		onEnd({ newIndex, oldIndex }) {
			console.log(newIndex, oldIndex)
			const targetRow = self.resourceList.splice(oldIndex, 1)[0]
			self.resourceList.splice(newIndex, 0, targetRow)
		}
	})
}

plan b

mounted(){
	this.setSort();//拖拽
},
methods: {
	setSort(){
		// 表格中需要实现行拖动，所以选中tr的父级元素
		const el = this.$refs.dragTable.$el.querySelectorAll('.el-table__body-wrapper > table > tbody')[0] // table
		this.sortable = Sortable.create(el,{
			ghostClass:'sortable-ghost',
			setData:function(dataTransfer){
				dataTransfer.setData('Text', '')
			},
			onEnd: evt => {
				// console.log(this.data) //:data="data" 所有数据
				const targetRow = this.data.splice(evt.oldIndex, 1)[0]; // this.data是表格所有数据
				// console.log(targetRow) // 挪动是单个数据
				this.data.splice(evt.newIndex, 0, targetRow);
			}
		})
	},
}

借鉴文章：https://www.zhangshengrong.com/p/2EaE06yO1M/