拖拽排序需将draggable="true"设在<td>等子元素而非<tr>，table上监听dragover并preventDefault，drop时用DOM操作而非数组索引，Safari仅支持text/plain数据传输。
拖拽事件绑定在 <tr> 上根本无效
浏览器默认不支持对 <tr> 元素直接触发 dragstart，即使加了 draggable="true"，多数情况下事件也不冒泡或被拦截。真正起作用的是把 draggable="true" 放在 <tr> 的子元素上（比如 <td> 或包裹的 <div>），再通过 event.target.closest('tr') 反向定位行。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给每行的首个
<td>添加draggable="true"，并设style="cursor: move;" - 在
table容器上监听dragover和drop，避免监听<tr>单独事件 - 不要在
<tr>上写ondragstart—— 它不会按预期触发 - Chrome/Firefox 支持良好；Safari 对
<tr>的dataTransfer写入有限制，需用text/plain模式传索引而非 DOM 节点
dragover 阻止默认行为才能触发 drop
没写 event.preventDefault() 是 90% 的“拖着没反应”问题根源。仅靠监听 drop 不够，dragover 必须显式阻止默认行为，否则浏览器认为该区域不可投放。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在
table或<tbody>上绑定dragover，里面只写event.preventDefault()，别加其他逻辑 - 避免在
dragover中频繁调用getBoundingClientRect()或 DOM 查询——滚动时易卡顿 - 若要高亮插入位置，用一个临时
<tr class="drop-hint">插入到目标行上方，而不是靠 CSS :before 伪元素（兼容性差）
排序逻辑必须基于 DOM 顺序，不能依赖数据数组索引
用户拖动后，DOM 节点物理位置已变，但如果你的 JS 还在用原始数组下标去更新视图（比如 arr.splice(oldIndex, 1); arr.splice(newIndex, 0, item)），就会错位。正确做法是操作真实 <tr> 节点本身。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在
drop事件中，用event.target.closest('tr')找到当前悬停所在的行，再用insertBefore()把被拖行插到它前面（或后面） - 不要用
appendChild()把行移到末尾再重排——会丢失原有顺序语义 - 如果表格有固定表头（
<thead>），确保只对<tbody>内的<tr>做操作，否则可能把<th>行也拖进来了 - 拖放后立即调用
table.querySelector('tbody').dispatchEvent(new Event('rowsorted', {bubbles: true}))，方便外部同步数据
Safari 下 dataTransfer.setData() 只认 text/plain
Safari 禁止在拖拽中写入自定义 MIME 类型（如 'application/json'），尝试会静默失败。这意味着你不能直接传对象或序列化数据，只能传字符串（通常是行的原始索引或 ID）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在
dragstart中只用：event.dataTransfer.setData('text/plain', String(rowIndex)) - 在
drop中用：const srcIndex = parseInt(event.dataTransfer.getData('text/plain')) - 避免依赖
event.dataTransfer.items—— Safari 返回空列表 - 如果需要传复杂标识（比如后端 ID），先存在
tr.dataset.id，拖拽时读取并塞进text/plain
dragover 忘记 preventDefault、以及误把 DOM 操作当成数组操作。这三处不校准，功能就只是“看起来能拖”，实际一动就乱序或失效。 
