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

Layui 的 table 组件本身不支持行拖拽排序功能。部分教程中提到的 rowDrag: true 参数来源于第三方插件（如 soulTable），并非 Layui 官方模块提供。直接在 table.render() 中设置 rowDrag: true 无法生效，操作无效。

原生 table 拖拽后顺序回滚的原因

这是常见问题：修改 tbody 中 tr 的 DOM 顺序后，未同步更新 table.cache['yourId'] 中的数组。Layui 的渲染、分页、导出、筛选等操作均依赖此缓存数据。缓存不更新，重新加载时顺序恢复原状；刷新页面后数据同样回到初始顺序。实际操作无法持久化排序结果。

• 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 和服务端存储三层状态的对齐时机。任何一次缓存更新遗漏都会导致排序结果无法保持，影响用户体验。