Layui数据表格行拖拽排序实现方法

Layui 官方提供的 table 组件默认并不支持行的拖拽排序功能。网络上有些教程中提到的 rowDrag: true 配置项，实际上是第三方扩展插件（例如 soulTable）所具备的特性，与 Layui 自身的核心模块并不相关。如果在 table.render() 中直接写入 rowDrag: true，该配置将不会产生任何实际效果，属于无效操作，白白浪费精力。

为什么原生 table 拖拽后顺序会回滚

这是最常见的陷阱：你费尽心思地修改了 tbody 中 tr 的 DOM 顺序，却没有同步更新 table.cache['yourId'] 里的数组。Layui 的所有渲染、分页、导出、筛选等操作都依赖这个缓存数据——缓存不变，调用 reload 就会还原；用户拖拽后一旦刷新页面，数据立即恢复原始顺序。说白了，拖了半天等于没拖。

• table.cache 是 Layui 内部唯一可信的数据源，必须手动通过 Array.splice() 重新调整数组顺序
• 如果使用了服务端分页（配置了 url），table.cache 只存储当前页数据，跨页拖拽会直接失效，此时需要先用 table.getData() 获取全量数据再操作
• 切勿在 drop 事件中执行 table.reload("id", { data: [...] })，这会覆盖整个缓存，相当于把你刚做好的调整全部清空

用原生 drag API 实现的关键步骤

不引入第三方库也能实现，但浏览器行为差异与移动端兼容性是比较大的挑战，需要格外谨慎：

• 为每一行 添加 draggable="true"，并在 dragstart 事件中调用 e.dataTransfer.setData('text', '') 来触发后续事件（Chrome 和 Firefox 必须这样写，否则拖拽无法启动）
• 在 dragover 和 drop 事件中务必执行 e.preventDefault()，否则默认的链接跳转或页面滚动会拦截你的拖拽逻辑
• 插入位置的判断不要使用 $(e.target).index()，因为 DOM 重排后索引会偏移；正确做法是利用 e.clientY 加上 targetTr.getBoundingClientRect().top 来计算相对位置
• 移动端基本不触发 dragstart，手指滑动会直接触发页面滚动。需要单独检测 'ontouchstart' in window，然后改用 touchstart/touchmove/touchend 配合 CSS transform 来模拟拖拽效果

用 Sortable.js 的注意事项

使用 Sortable.js 比原生方案更稳定，但它与 Layui 表格的 DOM 结构存在耦合风险，有几个细节需要特别注意：

• 必须在 table.render() 的 done 回调中初始化 Sortable，确保 tbody 已经真实渲染完成。传入的参数必须是原生 DOM 元素 tbody[0]，不能是 jQuery 对象
• 在 onEnd 回调中利用 evt.oldIndex 和 evt.newIndex 操作 table.cache['id'] 数组，调整顺序后再调用 table.renderData('id') 或 table.reloadData('id') 重新渲染
• 加上 filter: '.layui-table-empty'，否则空数据提示行可能会被误拖，导致索引错乱
• 禁用 ghostClass 和 chosenClass，因为 Layui 表格重绘时容易与这些样式产生冲突，引发视觉错位

说实话，真正棘手的从来不是拖拽动画怎么写，而是 DOM、table.cache、服务端存储这三层状态的对齐时机。哪怕只漏掉一次缓存更新，用户就会觉得“拖了等于没拖”，体验瞬间崩塌。