layui原生不支持列拖拽排序，核心限制是仅修改dom无法同步cols配置，必须手动更新cols数组并调用table.reload()，否则排序、导出、缓存等均按原始顺序执行。
layui table 列拖拽交换位置的核心限制
layui 原生 table 组件不支持列（th）的拖拽排序，也没有 colreorder 或类似配置项。所有「拖拽列头交换顺序」的效果，都必须脱离 layui 的自动渲染逻辑，手动接管 thead 的 dom 操作和列数据映射关系。
用原生 drag API + 重绘 table 实现列交换
关键不是拖动视觉效果，而是拖动结束后能正确更新 cols 配置数组，并重新初始化表格。Layui 表格依赖 cols 数组顺序决定列显示顺序，DOM 结构变化不会自动同步到内部列定义。
实操步骤：
- 给每个
th添加draggable="true"，并监听dragstart/dragover/drop -
dragstart中记录被拖列的原始索引（data-index），例如：th.setAttribute('data-index', i) -
drop时获取目标th的data-index，对table.config.cols[0]数组执行 splice 移动（注意：多级表头需扁平化处理） - 调用
table.reload()并传入更新后的cols，否则界面和导出、排序等行为仍按旧顺序执行
示例片段（在 table.render() 后执行）：
const $thList = $('thead th');
$thList.attr('draggable', 'true');
$thList.on('dragstart', function() {
this.dataset.dragIndex = $(this).index();
});
$('thead').on('dragover', function(e) { e.preventDefault(); });
$('thead').on('drop', function(e) {
e.preventDefault();
const fromIdx = parseInt(e.target.closest('th').dataset.dragIndex);
const toIdx = $(e.target.closest('th')).index();
if (fromIdx === toIdx) return;
<p>const cols = table.config.cols[0];
const col = cols.splice(fromIdx, 1)[0];
if (fromIdx </p><p>table.reload({ cols: [cols] });
});</p>
为什么不能只改 DOM 而不 reload？
Layui 表格在首次渲染后会缓存列元信息（如 field、templet、宽度、是否排序等），这些全来自初始化时的 cols 数组。仅移动 th 元素会导致：
- 点击列头排序时，实际触发的是原始索引对应的字段，而非当前视觉位置的字段
-
table.cache中每行数据仍是按原始列顺序存储的数组，tr内td与cols错位 - 导出 Excel 时列顺序与界面上看到的不一致
- 响应式隐藏列（
hide）逻辑失效，因为隐藏依据是cols里的hide属性索引
兼容性与边界问题提醒
真实项目中容易卡住的地方：
- 固定列（
fixed: 'left'或'right'）不能参与拖拽交换，否则 fixed 区域和主体区域列序不同步，表格错位 - 存在合并列头（
rowspan/colspan）时，th.index()不再等于cols索引，需提前构建「可视 th → cols 索引」映射表 - 使用了
toolbar或defaultToolbar时，工具栏按钮（如导出）绑定的列逻辑不会自动更新，reload 后需重新绑定或确保工具栏配置也随cols动态生成 - 移动端无
drag事件，该方案默认不生效；若需支持，得额外接入touchstart/move/end模拟，成本高且体验差
列顺序变更本质是配置变更，不是 UI 动效问题——别在 DOM 层打转，盯紧 cols 数组和 reload 的时机。
