原生拖拽排序需在dragstart中存tr引用或dataset索引，drop时用closest('tr')定位目标行；dragover必须作用于tbody/table容器并preventDefault；移动tr时应基于children而非childNodes；框架中需同步数据层，SortableJS需关闭autoScroll并注意索引映射。
dragstart 和 drop 里该存什么数据
原生拖拽 API 不自动传行索引，dragstart 里必须手动存。只设 event.dataTransfer.setData('text/plain', ...) 容易出错——比如多层嵌套表格时取到的是 td 而非 tr。更稳的做法是：在 dragstart 中直接保存对 tr 元素的引用（如挂到 event.dataTransfer 上），或用 dataset 记录行原始索引（tr.dataset.index = i）。Drop 时再通过 event.target.closest('tr') 找目标行，避免误判为 tbody 或 table。
dragover 必须阻止默认行为，但别漏掉容器监听
常见错误是只给 tr 绑 dragover，结果拖到两行之间就失效。真正起作用的是表格容器（tbody 或 table）上的 dragover 事件——它必须立刻调用 event.preventDefault()，否则浏览器会按默认逻辑处理（比如打开新页面、下载等）。tr 上的 dragover 只用于视觉反馈，不是功能必需。漏掉容器监听，drop 永远不会触发。
交换 DOM 顺序时要小心 tbody 的 childNodes
直接用 insertBefore() 移动 tr 是最简方式，但要注意：tbody.childNodes 包含文本节点（换行、空格），不能直接按数组下标取。推荐用 Array.from(tbody.children) 获取纯元素列表，再算新位置。如果表格有 thead 或 tfoot，确保只操作 tbody 下的 tr，否则可能把表头也拖进数据区。另外，Vue/React 项目中仅改 DOM 不同步数据层，会导致后续渲染错乱。
SortableJS 能省事，但得关掉 autoScroll
用 SortableJS 时，默认开启 autoScroll: true，滚动长表格时容易卡顿或跳动。实际项目中建议显式关闭：new Sortable(el, { autoScroll: false })。它底层仍是监听原生 drag 事件，所以仍需确保容器有 draggable="true"（虽然库会自动补，但某些框架如 Vue 的 v-for 渲染后可能被覆盖）。另外，onEnd 回调里的 evt.oldIndex 和 evt.newIndex 是 DOM 顺序，不是数据数组索引——如果用了过滤或分页，得自己映射回真实数据下标。
立即学习“前端免费学习笔记（深入）”；
拖拽排序看着简单，真正踩坑的地方都在事件绑定时机、DOM 节点类型判断和框架响应式同步上。尤其当表格带固定表头、虚拟滚动或服务端分页时，原生方案很快就会力不从心。
