vue拖拽插件 - Sortable

余白x

已于 2023-09-15 13:32:10 修改

阅读量443

点赞数

文章标签： vue.js 前端 javascript

于 2023-09-15 11:24:23 首次发布

本文链接：https://blog.csdn.net/weixin_54682740/article/details/132897904

版权

本文介绍了如何在Vue项目中使用Sortable.js实现表格行的拖动功能，包括npm安装、组件引入、DOM获取、配置选项以及实际效果展示。

摘要由CSDN通过智能技术生成

官网地址：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();
});

官网配置项截图：