1.安装依赖
npm install sortablejs --save
2.包裹拖拽内容
<div class="draggable" style="padding: 20px">
需要拖拽的内容,如表格
</div>
3.定义拖拽方法
// 列拖拽
columnDrop() {
const wrapperTr = document.querySelector('.draggable .el-table__header-wrapper tr'); // 这里我是对el-table中的列进行拖拽
this.sortable = Sortable.create(wrapperTr, {
animation: 180,
delay: 0,
onEnd: evt => {
// 接下来做索引的交换
let tempHableHeader = this.tableColumList // 先存一份临时变量表头数据
let temp // 临时变量用于交换
temp = tempHableHeader[evt.oldIndex] // 保存拖拽的内容
// 插入
tempHableHeader.splice(evt.oldIndex, 1);
tempHableHeader.splice(evt.newIndex, 0, temp)
// 交换
// tempHableHeader[evt.oldIndex] = tempHableHeader[evt.newIndex]
// tempHableHeader[evt.newIndex] = temp
// 重要的事情说三遍！！！
// 这里一定要先把表头数据清空，然后再下一轮中去赋值，否则会渲染错误
// 这里一定要先把表头数据清空，然后再下一轮中去赋值，否则会渲染错误
// 这里一定要先把表头数据清空，然后再下一轮中去赋值，否则会渲染错误
this.tableColumList = [] // 大家可以注掉试试哦
this.$nextTick(() => {
this.tableColumList = tempHableHeader
})
}
4. 挂在方法到钩子函数
mounted(){
this.columnDrop()
}