vue拖拽插件 - Sortable

官网地址：Sortable.js中文网

使用方法：

1. npm安装

npm install sortablejs --save

2. 在组件中引入插件

import Sortable from "sortablejs";

3. 给要拖动的table加上id用来获取dom，记得加row-key，不然会有显示问题

4. 使用

// 拖拽
const setSort = () => {
  const tbody = document.querySelector("#dragTable table tbody") as HTMLElement; // 获取要拖动的节点
  new Sortable(tbody, {
    animation: 150,
    sort: true,
    onEnd: (e: any) => {
      const targetRow = tableData.splice(e.oldIndex, 1)[0];
      tableData.splice(e.newIndex, 0, targetRow);
      console.log(tableData);
    }
  });
};
onMounted(() => {
  setSort();
});

官网配置项截图：

效果：