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();
});

官网配置项截图:

效果:

相关推荐
一朵梨花压海棠go3 小时前
html+js实现表格本地筛选
开发语言·javascript·html·ecmascript
attitude.x3 小时前
PyTorch 动态图的灵活性与实用技巧
前端·人工智能·深度学习
β添砖java3 小时前
CSS3核心技术
前端·css·css3
空山新雨(大队长)3 小时前
HTML第八课:HTML4和HTML5的区别
前端·html·html5
猫头虎-前端技术4 小时前
浏览器兼容性问题全解:CSS 前缀、Grid/Flex 布局兼容方案与跨浏览器调试技巧
前端·css·node.js·bootstrap·ecmascript·css3·媒体
阿珊和她的猫4 小时前
探索 CSS 过渡:打造流畅网页交互体验
前端·css
元亓亓亓4 小时前
JavaWeb--day1--HTML&CSS
前端·css·html
β添砖java4 小时前
CSS的文本样式
前端·css
前端小趴菜054 小时前
css - 滤镜
前端·css