前言：
Sortable.js是一款优秀的js拖拽库，支持ie9及以上版本ie浏览器和现代浏览器，也可以运行在移动触摸设备中。
1、在Vue项目中使用Sortable对table中数据进行拖拽排序
第一步：在项目中安装Sortable.js
npm install sortablejs --save
第二步：在组件中引入Sortable.js
import Sortable from 'sortablejs'
第三步：在组件中进行使用
<template>
<el-table
border
id="multipleTable"
:data="tableDatar"
tooltip-effect="dark"
style="width: 100%"
:header-cell-style="{ background: '#ECF0F3' }"
@selection-change="handleSelectionChange"
row-key="id"
>
<el-table-column label="排名" width="100px">
<template #default="scope">{{ scope.row.number }}</template>
</el-table-column>
<el-table-column prop="word" label="热词"> </el-table-column>
</el-table>
</template>
<script>
import Sortable from 'sortablejs'
export defalut{
data(){
return {
tableDatar:[
{
id:1,
number:1,
word:'热词1'
},
{
id:2,
number:2,
word:'热词2'
},
{
id:3,
number:3,
word:'热词3'
},
{
id:4,
number:4,
word:'热词4'
},
]
}
},
mounted(){
this.rowDrag()
},
methods:{
rowDrag(){
//获取拖拽元素的父容器
let tbody = document.querySelector('#multipleTable tbody')
const _this = this
Sortable.create(tbody,{
draggable:'.el-table__row' //被选择拖拽的元素
async onEnd(evt){ //拖拽结束
//console.log(this) 输出的this是Sortable实例对象
let curr = _this.tableDatar.splice(evt.oldIndex,1)[0] //curr代表的是当前被拖拽的元素，splice()返回值是一个数组，所以splice(起始位置,删除元素的个数)[0]是把当前拖拽的元素从tableDatar中删除
_this.tableDatar.splice(evt.newIndex,1,curr)//把被拖拽的元素添加到tableDatar中
//获取排序后的id值，通过接口传递给后端
let ids = _this.tableDatar.map(item=>item.id)
const res = await rankWordAPI(ids) //rankWordAPI是接口
if(res.code==200){
console.log('重新排序成功')
}
}
})
}
}
}
</script>
注意点：
- 要注意获取拖拽元素的父容器时，如果使用
document.querySelector('.el-table__body tbody'),需要检查一下获取的tbody是否是所想的tbody(因为可能存在多个el-table组件)。 - 对于Sortable的配置项有很多，可以见Sortable中文网
this指向的问题，在sortable配置项-函数中，this指向的是sortable实例而非vue实例- 给
el-table组件设置row-key='id',因为排序后index发生会发生变化，所以绑定的row-key的值需要是唯一的
在配置项函数onEnd()中输出的evt，如下：
