Layui表格实现类似Excel行数据鼠标左右拖拽排序

很多前端开发者在实际项目中对 Layui 表格行拖拽排序存在一个经典误区：认为它可以像 Excel 一样实现横向拖拽行数据。实际上，Layui 原生 table 组件在处理行拖拽时有着明确的行为限制——它仅支持垂直方向的拖拽重排。浏览器对 tr 的 dragover 事件也只在上下移动时有稳定的触发逻辑，左右拖拽在表格行上几乎没有语义，浏览器更不会生成有效的 drop 区域判断。大家之所以误以为能像 Excel 那样左右拖动行数据，其实是一种视觉错觉：Excel 确实可以拖拽列宽、调整列顺序和行高，但「行数据的横向拖拽」这个操作本身就不存在。实际开发中的真实需求通常归结为两项：通过上下拖拽调整表格行的排列顺序，以及通过左右拖拽列头来调整列的显示顺序。下面直接进入实操环节，聚焦核心实现。

为什么不能用 mousemove + left/right 仿 Excel 拖行

浏览器对 tr 元素的 dragover 事件只在垂直方向具备稳定的触发逻辑。一旦鼠标发生横向移动，e.clientY 的变化值非常微弱，此时如果依靠 getBoundingClientRect().top 来判断插入位置，很容易出现判断失效，最终误认为鼠标仍然停留在"同一行内"，进而引发 DOM 顺序错乱甚至页面卡死。Layui 渲染出的 tbody 采用的是块级流式布局，并未使用 display: flex 或 grid 提供横向坐标锚点，强行计算 left/right 位置基本等同于猜测坐标，结果不可靠。

用 Sortable.js 实现可靠的上下拖拽（推荐路径）

在众多方案中，Sortable.js 是目前稳定性最好、兼容性最强、并且在移动端也能优雅降级的首选。使用它的关键在于搞清楚"拖拽完成后如何同步数据"，而不在于拖拽行为本身。

• 务必等到 table.render() 的 done 回调执行完毕后再去初始化拖拽，否则 tbody 还未挂载到 DOM 上，拖拽无法生效。
• 使用 Sortable.create(tbody, { ... }) 来绑定拖拽，千万不要选择 table.elem —— 它指向的是 div.layui-table 容器，并非真正的 tbody。
• 在 onEnd 回调中不要直接操作 table.cache，而应该按照 tr 的实际顺序读取 data-index 或你预先存储的唯一 ID，然后重新排列原始数据数组。
• 最后务必调用 table.reload('demo', { data: newArr }) 来刷新表格，而不是使用 table.reloadData() —— 后者不会重置分页状态，翻页后顺序会全部错乱。

移动端拖拽必须手动模拟，并禁用默认滚动

iOS Safari 和安卓 Chrome 完全不会触发 dragstart/dragover/drop 事件。你在代码中写的 draggable="true" 在手机上形同虚设。

• 首先检测 'ontouchstart' in window，如果为真则走 touchstart/touchmove/touchend 这套流程。
• 在 touchstart 事件中立即执行 e.preventDefault()，否则 iOS 会抢走事件并导致页面滚动。
• 在 touchmove 中使用 e.touches[0].clientY 来计算手指位置，同时将 tr.getBoundingClientRect() 的结果缓存起来，不要在每一帧都重复计算。
• 插入逻辑与 PC 端保持一致：根据 Y 坐标落在某行的上半部分还是下半部分来决定插入到该行之前或之后，不依赖 index 索引或兄弟节点遍历。

数据不同步是 90% 拖拽失败的根本原因

很多场景下，DOM 顺序已经发生了变化，但 table.config.data 并没有同步更新，table.cache 里保存的仍然是旧顺序——这会导致导出、搜索、分页等功能全部错乱。这并非框架的 bug，而是缺少了一个关键的数据同步步骤。

• 拖拽结束时，遍历当前 tbody 下的所有 tr，读取每个 tr 上的 data-index 属性（Layui 在渲染时会自动写入该属性）。
• 用这个新的顺序去映射原始数据数组：newArr = dataIndexList.map(i => originData[i])。
• 确保传给 table.reload() 的 data 参数是一个完整的新数组，而不是部分 splice 后的片段或对象引用。
• 不要直接给 table.cache['demo'] 赋值——reload 方法会自动覆盖它，此外 initSort、page 等内部状态也不会自动更新。

真正让开发者头疼的从来不是拖拽动画本身，而是 DOM、内存数组、Layui 内部缓存三者之间那不到 10 行代码的同步时机。少了一个 preventDefault()，少了一次 reload，或者误把 data-index 当作 index() 来使用，整个排序就会陷入"看起来动了，实际上没变"的尴尬局面。