实现表格拖拽、拖动

使用sortable.js实现

官方网站： http://www.sortablejs.com/

中文文档： https://www.itxst.com/sortablejs/neuinffi.html

1、yarn add sortablejs

2、需要重新运行项目

3、代码示例（以element table组件为例）

/**
*注意：因为拖拽改变了dom顺序，即改变了元素的index。
*所以无论是v-for语句里的key，还是el-table的row-key，都不要设置为index，而是要设置为id或者其他可用于区分的字段
/
<div class="menuset-table">
  <el-table :data="newMenuList" border row-key="id" style="width: 100%">
    <el-table-column prop="name" label="菜单名称" />
      <el-table-column label="排序" width="180">
        <div class="drag-handlebtn">点我拖拽</div>
    </el-table-column>
  </el-table>
</div>



import Sortable from "sortablejs";  //需要引入

// 实现拖动排序
function dragSort() {
  let dragArea = document.querySelector(".el-table__body-wrapper tbody");
  const dragConfig = {
    animation: 150, // ms, number 单位：ms，定义排序动画的时间
    handle: ".drag-handlebtn",
    onUpdate: function (evt) {
      // 拖拽更新节点位置发生该事件
      // console.log("onUpdate.foo:", [evt.item, evt.from]);
    },
    onEnd(evt) {  // 结束拖拽
      // console.log("结束表格拖拽", evt);
      // 如果拖拽结束后顺序发生了变化，则对数据进行修改
      if (evt.oldIndex !== evt.newIndex) {
        let currRow = state.newMenuList.splice(evt.oldIndex,1)[0];
        state.newMenuList.splice(evt.newIndex, 0, currRow);
          // console.log(state.newMenuList)
        }
      },
    }
  Sortable.create(dragArea, dragConfig);
}

onMounted(()=>{
  dragSort()
})