如何使elmentui/plus拥有拖拽功能？答：sortablejs

需求场景：产品提了一个需求，要求实现表格的拖拽，并将排序后的表格数据返回给后端实现永久的拖拽。

实现思路：下载安装使用sortable，获取表格节点，new一个sortable对象，在实例化时传入表格节点和配置对象即可

探索经历：当我拿到这个需求时，我的第一想法是实现不了，毕竟element组件是人家的封装的如果我要实现的话就得去研究它的源代码了，有点过于费时费力了，其次我想到的是按需引用其他组件库的组件例如quasarui，最后发现一个宝藏js库，实现起来及其简单，而且轻量功能丰富，几乎0配置还能拿到我想要的移动的行索引。于是乎就有了这篇文章。

实现：

1. 安装：npm install sortablejs --save；
2. 引入：import Sortable from "sortablejs";
3. 实例化：获取盒子属性，然后在实例化的时候需要调用Sortable.create()方法；里面传入两个参数：

//el: 要是实现拖拽的父盒子真实DOM
  sort1 = Sortable.create(el, {
    animation: 200,//动画时间
    onEnd({ oldIndex, newIndex }) {//拖拽后的回调函数
      console.log('onEnd', oldIndex, newIndex)
    },
  })

注意哈，咱们拿的可是真实DOM，拿vue举例咱们得onMounted后才能取DOM，实例化等一系列操作！还有关于绑定的dom必须是父表格第一层，不能是嵌了好几层div，然后拿最外层是行不通的嗷！拿element plus举例：

import Sortable from 'sortablejs'
import { ref, onMounted } from 'vue'
onMounted(() => {
  const el = document.querySelector('.el-table__body-wrapper tbody')//直接抄这个选择器就行
  const sortable = new Sortable(el, {
    animation: 150,
    group: 'table',
    onEnd({ oldIndex, newIndex }) {
      console.log('onEnd', oldIndex, newIndex)
    },
  })
})

拓展：如果要把一个列表的项移到另一个列表，只需要两个列表都配置可拖拽并设置group为相同的值即可。实际上这个插件不仅仅能上下拖拽，嵌套拖拽，左右一拖拽，斜线拖拽都是可以实现的，详见：sortablejs.com/

我的完整代码实现：gitee.com/pwh22792656…