HTML表格实现原生拖拽需拦截dragstart、dragover、drop事件，dragover中必须preventDefault()，用before/after安全移动tr，动态计算Y坐标添加插入线，并同步更新JS数据源以防脱节。
HTML表格怎么开启原生拖拽支持
原生 draggable 属性只能让元素“被拖”，但表格的 <tr> 和 <td> 默认不响应拖拽事件，必须手动干预。关键不是加 draggable="true"，而是要拦截 dragstart、dragover、drop 三个事件，并阻止默认行为。
常见错误是只给 <tr> 加 draggable="true" 就以为能拖，结果拖不动或松手后没反应——因为浏览器默认禁止在非表单区域投放（drop 被拦掉了）。
- 必须在
dragover回调里调用event.preventDefault()，否则drop永远不会触发 -
dragstart中通过event.dataTransfer.setData('text/plain', '')做个占位，否则部分浏览器（如 Safari）会拒绝拖拽 - 不要给
<table>或<tbody>设draggable="true"，这会导致整块区域被拖，失去行级控制
如何安全交换两行 DOM 位置
直接用 insertBefore 或 appendChild 移动 <tr> 很容易出错：比如把 A 行插到 B 行下方时，若 B 已被移走，A 可能插空或重复插入。最稳的方式是用 before / after 方法配合临时标记。
推荐做法是：在 drop 事件中，拿到目标 <tr>（即用户想插到它前面/后面的那行），再根据鼠标位置决定插入方向，最后用 targetTr.before(draggedTr) 或 targetTr.after(draggedTr)。
立即学习“前端免费学习笔记（深入）”；
- 避免用
innerHTML重写整个<tbody>，会丢失绑定的事件监听器和输入框状态（比如某行有<input value="xxx">，重写后值就丢了） - 如果表格用了 Vue/React，别直接操作 DOM，应更新数据源并让框架重渲染；纯 HTML 场景才用 DOM 操作
- 注意 IE11 不支持
before/after，需降级为parentNode.insertBefore(newNode, refNode)
拖拽时怎么高亮目标插入位置
用户需要视觉反馈知道“松手后这行会插在哪”。不能只靠 hover 改背景色——因为拖拽中鼠标可能悬停在空白处，hover 不触发。得靠 dragover 动态计算鼠标相对于目标 <tr> 的 Y 坐标来判断是“插上方”还是“插下方”。
简单方案：在 dragover 中获取 event.clientY 和目标 <tr> 的 getBoundingClientRect().top 与 .bottom，若鼠标在上半区，就在该行上方加一个细横线样式（如 border-top: 2px dashed #007bff）；下半区则加 border-bottom。
- 别用
outline或box-shadow，容易干扰原有布局，尤其表格有border-collapse: collapse时表现异常 - 每次
dragover都要先清除之前所有插入线，否则多个行同时高亮会造成混乱 - 移动端没有
drag*事件，这个交互本身就不适用；要做兼容得换 touch + requestAnimationFrame 模拟，复杂度陡增
为什么拖拽后排序数据没同步到 JS 变量里
DOM 顺序变了，不代表你维护的数组或对象也跟着变。这是最容易被忽略的一环：前端展示层和业务数据层脱节。比如你用 const rows = [...document.querySelectorAll('tbody tr')] 初始化过一次，之后拖拽只动了 DOM，rows 还是旧顺序。
解决方法只有两种：要么每次拖拽完成立刻重新映射（Array.from(tbody.children).map(tr => tr.dataset.id)），要么从一开始就不依赖 DOM 序列，而是用一个独立的 ID 数组控制渲染顺序。
- 如果表格支持分页或筛选，DOM 中只存在当前页的
<tr>，此时按 DOM 排序得到的 ID 列表只是子集，不能代表全局顺序 - 服务端排序和客户端拖拽冲突时，建议禁用客户端拖拽，或增加“保存排序”按钮，显式提交新顺序到后端
- 记得在
drop后触发自定义事件（如new CustomEvent('table-order-changed')），方便其他模块响应
