vue拖拽插件 - Sortable

官网地址Sortable.js中文网

使用方法:

  1. npm安装

npm install sortablejs --save

  1. 在组件中引入插件

import Sortable from "sortablejs";

  1. 给要拖动的table加上id
  1. 使用
javascript 复制代码
// 拖拽
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();
});

官网配置项截图:

效果:

相关推荐
计算机-秋大田12 分钟前
基于Spring Boot的兴顺物流管理系统设计与实现(LW+源码+讲解)
java·vue.js·spring boot·后端·spring·课程设计
GDAL43 分钟前
HTML 中的 Canvas 样式设置全解
javascript
m0_528723811 小时前
HTML中,title和h1标签的区别是什么?
前端·html
Dark_programmer1 小时前
html - - - - - modal弹窗出现时,页面怎么能限制滚动
前端·html
GDAL1 小时前
HTML Canvas clip 深入全面讲解
前端·javascript·canvas
禾苗种树1 小时前
在 Vue 3 中使用 ECharts 制作多 Y 轴折线图时,若希望 **Y 轴颜色自动匹配折线颜色**且无需手动干预,可以通过以下步骤实现:
前端·vue.js·echarts
GISer_Jing1 小时前
Javascript排序算法(冒泡排序、快速排序、选择排序、堆排序、插入排序、希尔排序)详解
javascript·算法·排序算法
贵州数擎科技有限公司1 小时前
使用 Three.js 实现流光特效
前端·webgl
JustHappy1 小时前
「我们一起做组件库🌻」做个面包屑🥖,Vue的依赖注入实战💉(VersakitUI开发实录)
前端·javascript·github
拉不动的猪2 小时前
刷刷题16
前端·javascript·面试