原生HTML表格行拖拽排序需将draggable="true"设在<td>而非<tr>，dragstart中用setData传ID，dragover必须preventDefault()，drop时用before/after操作真实节点，移动端需用SortableJS等库替代。
原生 HTML 表格行拖拽排序能做，但直接给 <tr> 加 draggable="true" 一定失败——缺事件拦截、不阻止默认行为、不传数据，三者任一缺失都会卡在“拖不动”或“松手没反应”。
为什么 <tr> 上加 draggable="true" 没用
浏览器对 <tr> 的拖拽支持极弱：它默认把拖拽当文件下载处理，drop 事件被静默拦截。真正起作用的是把 draggable="true" 放在 <tr> 的子元素上（比如首个 <td>），再通过 event.target.closest('tr') 反向定位行。
- 不要给
<table>或<tbody>设draggable="true"，会拖整个容器 -
dragstart必须调用e.dataTransfer.setData('text/plain', id)，否则目标端收不到原始行标识 - Safari 只认
text/plain类型，传application/json会静默失败
dragover 不写 preventDefault() 就永远触发不了 drop
这是 90% 的“拖着没反应”问题根源。浏览器默认认为表格区域不可投放，必须在 dragover 回调里显式调用 event.preventDefault()，否则 drop 根本不会触发。
- 监听点应设在
<table>或<tbody>容器上，不是单个<tr> -
dragover里只做preventDefault()，别加 DOM 查询或getBoundingClientRect()——滚动时易卡顿 - 若需插入线提示，用
border-top/border-bottom加临时类，避开outline和box-shadow（border-collapse: collapse下会错位）
drop 时别用数组索引重排，要操作真实 <tr> 节点
用户松手后，DOM 节点物理位置已变，但如果你的 JS 还在用原始数组下标去更新视图（比如 arr.splice(oldIndex, 1); arr.splice(newIndex, 0, item)），就会错位。
立即学习“前端免费学习笔记（深入）”；
- 在
drop中用event.target.closest('tr')找到悬停所在行，再用targetTr.before(draggedTr)或targetTr.after(draggedTr)插入 - 绝对不要重写
<tbody>.innerHTML，会清空所有<input>的当前值和绑定的事件监听器 - IE11 不支持
before/after，需降级为parentNode.insertBefore(draggedTr, refNode)
移动端不支持原生 drag/drop，得换方案
原生 API 在 iOS Safari 和 Android Chrome 上基本不可用。这类逻辑必须用 touchstart/touchmove/touchend 模拟，或直接引入兼容库。
- 推荐
SortableJS：轻量、无依赖、自动处理 touch 事件、支持 Vue/React 集成 - 避免
jQuery UI Sortable：体积大、jQuery 依赖强、移动端适配差 - 若用库，仍需手动同步数据源——DOM 行序变了，JS 数组不更新，提交时顺序就错了
最易被忽略的不是怎么拖，而是拖完之后：DOM 顺序变了，但表单输入框的值、绑定的事件、外部 JS 数组索引，全都没变。这个脱节问题往往拖到提交时才暴露。
