拖拽列排序关键在于精准识别目标列位置：需在dragover中用clientX与th的getBoundingClientRect计算水平偏移，判断是否落入该列1/3～2/3区间，而非依赖event.target；动态列宽需实时重算边界；交换列时应按索引统一提取并重排所有单元格，保留colspan/rowspan；dragend须清理class、监听器及状态，并触发column-reorder事件。

拖拽时如何识别目标列位置

关键不是监听 dragover 事件本身，而是要在该事件中用 event.clientX 和 th 元素的 getBoundingClientRect() 计算鼠标相对于每列的水平偏移，判断是否进入该列左半区或右半区。很多实现直接按触发元素判定目标列，结果拖到列边缘时目标跳变——实际应取「鼠标x坐标落在哪一列的1/3～2/3区间内」作为稳定判定依据。

• 避免只依赖 event.target，它可能返回 td、th 或其子元素，需向上查找最近的 th 或 td
• 列宽动态变化（如响应式、内容撑开）时，每次 dragover 都要重新计算各列边界，不能缓存初始宽度
• 表格含固定表头（position: sticky）时，需注意 getBoundingClientRect() 返回的是视口坐标，无需额外滚动补偿

如何安全交换两列的 DOM 结构

直接对 th 和对应 td 分别操作极易出错：表头和数据行列数不一致、合并单元格（colspan）被撕裂、rowspan 错位。正确做法是按列索引统一提取并重排所有单元格，再批量替换。

• 先遍历所有 tr，对每一行提取第 n 列的单元格（包括 colspan > 1 的情况），存入二维数组 columns[n][rowIndex]
• 交换两列数据后，逐行重建该行 DOM：清空原 tr，按新顺序插入单元格，保留原有 colspan 和 rowspan 属性
• 不要用 insertBefore 在原位置移动节点——当存在跨行单元格时，DOM 树层级关系会被破坏，渲染异常

拖拽结束时必须重置哪些状态

用户松手后，若只恢复视觉样式但没清理事件监听或临时 class，下次拖拽会叠加副作用。最常漏掉的是 dragend 后未清除 th 上的 dragging class 和全局 drop 监听器。

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

• 在 dragend 中移除所有 th 的 drag-over-left/drag-over-right 类，并重置 data-drag-index
• 如果用了全局 document.addEventListener('drop', ...)，必须在 dragend 里调用 removeEventListener，否则多次拖拽后事件重复触发
• 交换完成后立即触发自定义事件（如 column-reorder），传入旧索引和新索引，方便外部更新排序状态或发送 API 请求

IE11 或 Safari 13.1 以下版本的兼容处理

这些浏览器不支持 setDragImage 自定义拖拽图标，且 dragstart 中无法阻止默认行为后再设置 effectAllowed，导致拖拽光标始终是禁止符号。妥协方案是降级为「点击列标题 + 拖拽辅助手柄」而非整列拖拽。

立即学习“前端免费学习笔记（深入）”；

• 检测 'draggable' in document.createElement('span') 和 navigator.userAgent 中是否含 Trident 或 Version/13.1
• 对旧版浏览器隐藏原生拖拽逻辑，改用绝对定位的浮动层模拟拖拽视觉反馈
• getData('text/plain') 在 Safari 旧版中返回空字符串，需改用 setData('text/html', '') 并配合 event.dataTransfer.effectAllowed = 'move'

拖拽列排序真正难的不是交互效果，而是列内存在 colspan、rowspan、动态渲染内容或虚拟滚动时，DOM 重排必须保持表格语义结构完整——这时候靠视觉位移蒙混过关，下一帧就可能触发渲染崩溃。