列拖动不能直接用drag事件，因列非单个DOM节点而是跨行同索引单元格集合；需遍历所有行交换cells索引，用replaceChild安全替换并同步data-field或colOrder数组更新JS数据源。
列拖动为什么不能直接用的drag事件
因为列不是单个 DOM 节点，而是跨所有 <tr> 的同一索引位置的 <code><td> 或 <code><th> 集合。浏览器原生 drag API 只能拖拽一个元素，没法“拖一列”。强行给 <code><th> 加 <code>draggable="true" 后，drop 事件拿到的是那个 <th>，但你真正要操作的是整列所有 <code><td> ——包括 <code><thead>、<code><tbody>、甚至 <code><tfoot> 中对应位置的单元格。
<h3>如何安全交换两列的 DOM 结构</h3>
<p>核心是遍历所有行，对每行的 <code>cells 集合（即 tr.cells）做索引交换，而不是移动 <td> 节点本身。否则会破坏表格语义、丢失 input 值、断掉事件监听器。
<ul>
<li>用 <code>tr.cells[i] 获取第 i 列单元格，它返回的是 live HTMLCollection，可读可写但不可直接赋值
正确做法：对每一行 tr，用 tr.insertBefore(tdA, tdB) 或 tdB.before(tdA) 移动节点 —— 但必须确保所有行都按相同逻辑操作，否则列错位
更稳的方式：先提取两列所有 <td> 和 <code><th> 的引用数组，再逐行用 <code>tr.replaceChild(newCell, oldCell) 替换；注意 replaceChild 不会丢失 value 或 checked 状态
绝对不要用 innerHTML 重写整行或整表，<input value="用户刚输的内容"> 会立刻清空
拖动列头时怎么实时显示插入线
列拖动没有“上半区/下半区”概念，插入线只能水平显示在目标列左侧或右侧。关键不是监听 dragover，而是监听 mousemove 并计算鼠标 X 坐标相对于每个 <th> 的偏移。
<ul>
<li>在 <code>dragstart 中记录被拖列的原始索引 dragColIndex
在 mousemove（绑定在 table 上）中，遍历所有 thead th，用 th.getBoundingClientRect() 拿到左右边界
若 event.clientX ，说明鼠标在该列左半区 → 插入线应显示在该列左侧；否则显示在右侧
动态添加一个 <div class="col-drop-hint"> 绝对定位覆盖在表头下方，宽度设为 2px，背景色醒目，每次移动前清除旧 hint
<li>别用 <code>:before 伪元素画线 —— 在 border-collapse: collapse 下容易错位或被压扁
TR结构变动后如何同步 JS 数据源
表格列序变了，但你的 JS 数组（比如 rows = [{name, age}, ...]）还是按旧顺序映射字段。如果列交换后没更新数据结构，后续导出、筛选、校验都会出错。
Wechat Article Html
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
下载
立即学习“前端免费学习笔记（深入）”；
- 不要靠列名字符串匹配（如
"age"）来定位字段 —— 用户可能重命名列，或存在重复列名
- 推荐在初始化时给每个
<th> 设 <code>data-field="age"，交换列时只交换这些 data-field 属性，JS 层按属性名重新组织每行对象
- 或者维护一个列顺序数组
colOrder = ["id", "name", "age"]，列拖动后更新这个数组，渲染时按它取值：row[colOrder[i]]
- 如果用了
contenteditable 或表单控件，交换列后必须手动触发 input 事件，否则 Vue/React 的双向绑定不会响应
列拖动真正的难点不在拖，而在“列”这个概念根本不存在于 DOM 树中 —— 它是横向投影关系。所有操作必须同步作用于多行、多节（thead/tbody/tfoot）、多类型单元格，稍有遗漏就会导致视觉与数据脱节。
因为列不是单个 DOM 节点，而是跨所有 <tr> 的同一索引位置的 <code><td> 或 <code><th> 集合。浏览器原生 drag API 只能拖拽一个元素，没法“拖一列”。强行给 <code><th> 加 <code>draggable="true" 后，drop 事件拿到的是那个 <th>，但你真正要操作的是整列所有 <code><td> ——包括 <code><thead>、<code><tbody>、甚至 <code><tfoot> 中对应位置的单元格。
<h3>如何安全交换两列的 DOM 结构</h3>
<p>核心是遍历所有行，对每行的 <code>cells 集合（即 tr.cells）做索引交换，而不是移动 <td> 节点本身。否则会破坏表格语义、丢失 input 值、断掉事件监听器。
<ul>
<li>用 <code>tr.cells[i] 获取第 i 列单元格，它返回的是 live HTMLCollection，可读可写但不可直接赋值
tr，用 tr.insertBefore(tdA, tdB) 或 tdB.before(tdA) 移动节点 —— 但必须确保所有行都按相同逻辑操作，否则列错位<td> 和 <code><th> 的引用数组，再逐行用 <code>tr.replaceChild(newCell, oldCell) 替换；注意 replaceChild 不会丢失 value 或 checked 状态
innerHTML 重写整行或整表，<input value="用户刚输的内容"> 会立刻清空拖动列头时怎么实时显示插入线
列拖动没有“上半区/下半区”概念，插入线只能水平显示在目标列左侧或右侧。关键不是监听 dragover，而是监听 mousemove 并计算鼠标 X 坐标相对于每个 <th> 的偏移。
<ul>
<li>在 <code>dragstart 中记录被拖列的原始索引 dragColIndex
mousemove（绑定在 table 上）中，遍历所有 thead th，用 th.getBoundingClientRect() 拿到左右边界event.clientX ，说明鼠标在该列左半区 → 插入线应显示在该列左侧；否则显示在右侧
<div class="col-drop-hint"> 绝对定位覆盖在表头下方，宽度设为 2px，背景色醒目，每次移动前清除旧 hint
<li>别用 <code>:before 伪元素画线 —— 在 border-collapse: collapse 下容易错位或被压扁TR结构变动后如何同步 JS 数据源
表格列序变了，但你的 JS 数组（比如 rows = [{name, age}, ...]）还是按旧顺序映射字段。如果列交换后没更新数据结构，后续导出、筛选、校验都会出错。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
- 不要靠列名字符串匹配（如
"age"）来定位字段 —— 用户可能重命名列，或存在重复列名 - 推荐在初始化时给每个
<th> 设 <code>data-field="age"，交换列时只交换这些data-field属性，JS 层按属性名重新组织每行对象 - 或者维护一个列顺序数组
colOrder = ["id", "name", "age"]，列拖动后更新这个数组，渲染时按它取值：row[colOrder[i]] - 如果用了
contenteditable或表单控件，交换列后必须手动触发input事件，否则 Vue/React 的双向绑定不会响应
列拖动真正的难点不在拖，而在“列”这个概念根本不存在于 DOM 树中 —— 它是横向投影关系。所有操作必须同步作用于多行、多节（thead/tbody/tfoot）、多类型单元格，稍有遗漏就会导致视觉与数据脱节。
