sortable排序

当我们使用 el-table 组件时，需要用到拖拽排序的需求时，虽然 el-table 自带支持按列排序，但是当我们自己拖拽进行排序时，现有组件是无法满足的，这个时候我们就需要SortableJS。

对于集合中的每个元素，通过测试元素本身并遍历其在DOM树中的祖先，获得与选择器匹配的第一个元素。 将可排序项的数据id (dataIdAttr选项)序列化为字符串数组。 根据数组对元素排序。 完全删除可排序功能。 保存和恢复。

如果我们想要实现拖拽排序功能，有很多现成的库可以供我们使用，比如Sortable.js（vuedraggable）、dnd-kit（react-dnd）等可以轻松帮助我们实现这一功能。 本文的目标不是

做vue项目拖拽排序表格的时候，vuedraggable拖拽插件没有对'el-table'进行拖拽排序，所以改用sortablejs进行拖拽排序。

第一步：在项目中安装Sortable.js npm install sortablejs --save 第二步：在组件中引入Sortable.js import Sortable from 'sort

本文先写了在 Vue3 中利用 draggable 属性手写实现列表拖拽排序的功能。接下来在 Element Plus 组件库中结合 sortable.js 实现 table 表格拖拽排序。

1. 安装步骤 Sortable.js是一款轻量级的拖放排序列表的js插件（虽然体积小，但是功能很强大） npm install sortablejs --save vue 在 main.js 中引入

概述 实际项目中，偶尔会遇到关于拖动相关的业务，比较常见的就是拖动调整顺序，前端比较知名的拖动库Sortable，封装的很完善，包括位置计算，过渡转化等，这里记录一期使用Sortable实现拖动排序。

uni-app 拖拽排序 前言 这周做一个页面时，有一个人物排序，可以手动拖动更改排序位置的功能。在经过查找之后，找到了 sortable.js,它可以用来实现这个拖拽的功能。 思路 在查看sorta