Layui 2.8.x 原生不支持列拖拽,因源码无 dragCol 等配置项;需手动监听 mouse 事件、动态重绘表头并 reload 刷新 cols;固定列仅限同区拖拽,reload 必须显式传入 page、where、initSort 等参数防状态丢失。
原生不支持,必须手动监听 mouse 事件 + 动态重绘表头,再通过 table.reload() 传入新顺序的 cols 数组实现。
为什么直接配置无效?
Layui 2.8.x 及所有旧版本的 table.render() 完全没有 dragCol、colDraggable 或类似配置项。这不是漏写参数,而是源码里压根没实现——官方文档和 GitHub 仓库均无相关逻辑。你看到的“拖拽效果”,全是靠 DOM 操作模拟出来的。
- 试图在
cols里加draggable: true或fixed: 'left'不会触发拖拽行为 -
table.setColsWidth()和列宽调整也和拖拽无关,别混用 - 移动端
dragstart基本不可靠,iOS/安卓 WebView 中手指一偏就触发页面滚动,drop 事件收不到
怎么手动实现列拖拽?
核心是三步:捕获 mousedown → 跟踪 mousemove 计算目标位置 → mouseup 后调用 table.reload() 刷新。
- 必须在
done回调里绑定事件,确保thead th已渲染完成 - 拖拽时要禁用文本选中:
document.onselectstart = () => false,否则高亮干扰视觉 -
cols是二维数组(如[[{field:'id'}, {field:'name'}]]),交换顺序必须替换最内层数组元素位置,不能只改title - 固定列(
fixed: 'left'或'right')DOM 结构独立,只能在同区域内部拖拽,跨区会破坏布局
reload 时容易丢哪些参数?
table.reload() 不传参就会重置分页、筛选、排序状态,这是高频翻车点。
- 必须显式传入
page(当前页码)、where(筛选条件)、initSort(当前排序字段/方向) - 漏传
where→ 筛选清空;漏传page→ 自动跳回第 1 页 - 如果用了
cache: true,记得 reload 前先从table.cache['yourTableId']读原始数据,避免重复请求接口 - 频繁 reload 会造成明显闪烁,尤其列数 >15 或行数 >1000 时,建议只在
mouseup后执行一次
真正稳定的做法不是硬啃原生 mouse 事件,而是引入 soulTable.slim.js 这类轻量增强插件——它封装了列拖拽、固定列兼容、移动端 touch fallback 等细节,比自己从零写更省时间,也更少踩坑。


















