拖拽排序需将draggable="true"设在等子元素而非，table上监听dragover并preventdefault，drop时用dom操作而非数组索引，safari仅支持text/plain数据传输。

拖拽事件绑定在 <tr> 上根本无效 <p>浏览器默认不支持对 <code><tr> 元素直接触发 <code>dragstart，即使加了 draggable="true"，多数情况下事件也不冒泡或被拦截。真正起作用的是把 draggable="true" 放在 <tr> 的子元素上（比如 <code><td> 或包裹的 <code><div>），再通过 <code>event.target.closest('tr') 反向定位行。

实操建议：

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

• 给每行的首个 <td> 添加 <code>draggable="true"，并设 style="cursor: move;"
• 在 table 容器上监听 dragover 和 drop，避免监听 <tr> 单独事件 <li>不要在 <code><tr> 上写 <code>ondragstart —— 它不会按预期触发
• Chrome/Firefox 支持良好；Safari 对 <tr> 的 <code>dataTransfer 写入有限制，需用 text/plain 模式传索引而非 DOM 节点

  dragover 阻止默认行为才能触发 drop

  没写 event.preventDefault() 是 90% 的“拖着没反应”问题根源。仅靠监听 drop 不够，dragover 必须显式阻止默认行为，否则浏览器认为该区域不可投放。

  实操建议：

  • 在 table 或 <tbody> 上绑定 <code>dragover，里面只写 event.preventDefault()，别加其他逻辑
  • 避免在 dragover 中频繁调用 getBoundingClientRect() 或 DOM 查询——滚动时易卡顿
  • 若要高亮插入位置，用一个临时 <tr class="drop-hint"> 插入到目标行上方，而不是靠 CSS :before 伪元素（兼容性差） <h3>排序逻辑必须基于 DOM 顺序，不能依赖数据数组索引</h3> <p>用户拖动后，DOM 节点物理位置已变，但如果你的 JS 还在用原始数组下标去更新视图（比如 <code>arr.splice(oldIndex, 1); arr.splice(newIndex, 0, item)），就会错位。正确做法是操作真实 <tr> 节点本身。 <p>实操建议：</p> <ul> <li>在 <code>drop 事件中，用 event.target.closest('tr') 找到当前悬停所在的行，再用 insertBefore() 把被拖行插到它前面（或后面）
  • 不要用 appendChild() 把行移到末尾再重排——会丢失原有顺序语义
  • 如果表格有固定表头（<thead>），确保只对 <code><tbody> 内的 <code><tr> 做操作，否则可能把 <code><th> 行也拖进来了 <li>拖放后立即调用 <code>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
  拖拽排序看着简单，真正卡住人的往往是 Safari 的 dataTransfer 限制、dragover 忘记 preventDefault、以及误把 DOM 操作当成数组操作。这三处不校准，功能就只是“看起来能拖”，实际一动就乱序或失效。