原生拖拽表格行需正确处理dragstart、dragover和drop事件：tr设draggable="true"，dragstart中setData，dragover中preventDefault，drop时用before/after按鼠标位置安全交换行，禁用innerHTML重写，框架中应更新数据而非DOM。
原生拖拽表格行不是加个 draggable="true" 就完事——绝大多数失败都卡在 dragover 没调 event.preventDefault()，或者用 innerHTML 粗暴重写 <tbody> 导致输入框失焦、事件监听器丢失。
为什么加了draggable="true"还是拖不动
浏览器默认禁止在非表单/可编辑区域接收 drop，dragover 事件不阻止默认行为，drop 就永远不会触发。Safari 还额外要求 dataTransfer.setData() 必须有值，哪怕只是空字符串。
- 必须给每个
<tr> 绑定 dragstart，并在回调里设 event.dataTransfer.setData('text/plain', '')
-
dragover 回调里第一行就得写 event.preventDefault()，缺一不可
- 别给
<table> 或 <tbody> 加 draggable="true"，否则整块被拖走，失去行级控制
- IE11 不支持
before()/after()，得回退到 parentNode.insertBefore(newNode, refNode)
怎么安全交换两行DOM位置
直接用 appendChild() 或 insertBefore() 移动 <tr> 容易出错：比如把 A 行插到 B 行下方时，B 行若已被移走，A 可能插空或重复插入。最稳的方式是用目标行作锚点，动态决定方向。
- 在
drop 事件中，拿到鼠标悬停的那行 targetTr
- 用
event.clientY 和 targetTr.getBoundingClientRect() 判断鼠标在该行上半区还是下半区
- 上半区 → 执行
targetTr.before(draggedTr)；下半区 → 执行 targetTr.after(draggedTr)
- 绝对不要用
innerHTML = newHtmlString 重写整个 <tbody>，会清空所有 <input> 的当前值和绑定的事件
拖拽时如何高亮插入位置
仅靠 :hover 不行——拖拽中鼠标可能悬停在空白处，CSS 无法响应。必须靠 dragover 动态计算并加样式。
立即学习“前端免费学习笔记（深入）”；
- 在
dragover 中获取 targetTr.getBoundingClientRect() 的 top 和 bottom
- 若
event.clientY < (top + bottom) / 2，说明鼠标在上半区，给 targetTr 加 border-top: 2px dashed #007bff
- 否则加
border-bottom: 2px dashed #007bff
- 每次
dragover 触发前先清除之前所有行的 border 样式，避免残留
- 别用
outline 或 box-shadow，在 border-collapse: collapse 下表现异常
Vue/React项目里千万别直接操作DOM
框架接管了 DOM 更新逻辑，你手动移动 <tr>，视图不会同步，下一次 re-render 还会按原始数据顺序覆盖回来。
- 只在纯 HTML + 原生 JS 场景下操作 DOM
- Vue 项目应更新数组顺序（如用
Array.splice() 调整 v-for 数据源），让框架驱动渲染
- React 项目同理，更新 state 中的 rows 数组，并确保 key 稳定（别用 index）
- 如果用了
html5sortable 这类库，务必看它是否提供 onSort 回调来同步数据层
最常被忽略的是：拖拽结束后的状态清理——比如 dragstart 里加的 opacity、dragover 里加的 border 样式、以及 dragend 事件没监听导致拖拽态残留。这些细节不处理，用户会明显感觉到“卡顿”或“视觉错乱”。
浏览器默认禁止在非表单/可编辑区域接收 drop，dragover 事件不阻止默认行为，drop 就永远不会触发。Safari 还额外要求 dataTransfer.setData() 必须有值，哪怕只是空字符串。
- 必须给每个
<tr>绑定dragstart，并在回调里设event.dataTransfer.setData('text/plain', '') -
dragover回调里第一行就得写event.preventDefault()，缺一不可 - 别给
<table>或<tbody>加draggable="true"，否则整块被拖走，失去行级控制 - IE11 不支持
before()/after()，得回退到parentNode.insertBefore(newNode, refNode)
怎么安全交换两行DOM位置
直接用 appendChild() 或 insertBefore() 移动 <tr> 容易出错：比如把 A 行插到 B 行下方时，B 行若已被移走，A 可能插空或重复插入。最稳的方式是用目标行作锚点，动态决定方向。
- 在
drop事件中，拿到鼠标悬停的那行targetTr - 用
event.clientY和targetTr.getBoundingClientRect()判断鼠标在该行上半区还是下半区 - 上半区 → 执行
targetTr.before(draggedTr)；下半区 → 执行targetTr.after(draggedTr) - 绝对不要用
innerHTML = newHtmlString重写整个<tbody>，会清空所有<input>的当前值和绑定的事件
拖拽时如何高亮插入位置
仅靠 :hover 不行——拖拽中鼠标可能悬停在空白处，CSS 无法响应。必须靠 dragover 动态计算并加样式。
立即学习“前端免费学习笔记（深入）”；
- 在
dragover中获取targetTr.getBoundingClientRect()的top和bottom - 若
event.clientY < (top + bottom) / 2，说明鼠标在上半区，给targetTr加border-top: 2px dashed #007bff - 否则加
border-bottom: 2px dashed #007bff - 每次
dragover触发前先清除之前所有行的 border 样式，避免残留 - 别用
outline或box-shadow，在border-collapse: collapse下表现异常
Vue/React项目里千万别直接操作DOM
框架接管了 DOM 更新逻辑，你手动移动 <tr>，视图不会同步，下一次 re-render 还会按原始数据顺序覆盖回来。
- 只在纯 HTML + 原生 JS 场景下操作 DOM
- Vue 项目应更新数组顺序（如用
Array.splice()调整v-for数据源），让框架驱动渲染 - React 项目同理，更新 state 中的 rows 数组，并确保 key 稳定（别用 index）
- 如果用了
html5sortable这类库，务必看它是否提供onSort回调来同步数据层
最常被忽略的是：拖拽结束后的状态清理——比如 dragstart 里加的 opacity、dragover 里加的 border 样式、以及 dragend 事件没监听导致拖拽态残留。这些细节不处理，用户会明显感觉到“卡顿”或“视觉错乱”。
