Layui数据表格中如何实现行拖拽排序功能

Layui table 原生不支持行拖拽排序，rowDrag: true 是第三方插件（如 soulTable）功能；必须同步更新 table.cache 数据，否则拖拽后顺序回滚；服务端分页需先获取全量数据；移动端需用 touch 事件替代 drag API。

layui table 原生不支持行拖拽排序，所谓“开启即用”的 rowdrag: true 是第三方插件（如 soultable）提供的能力，不是 layui 官方模块的功能。直接在 table.render() 里加这个参数会完全无效。

为什么原生 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 实现的关键步骤

不引入第三方库也能跑通，但要注意浏览器行为差异和移动端兼容性断层：

• 给每行 <tr> 加 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 的注意事项

比原生更稳，但和 layui 表格 DOM 结构有耦合风险：

• 必须在 table.render() 的 done 回调里初始化，确保 tbody 已真实渲染，传参必须是原生 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、服务端存储这三层状态的对齐时机。哪怕只漏掉一次缓存更新，用户就会觉得“拖了等于没拖”。