加 draggable="true" 仍拖不动，因浏览器对拖拽支持弱，默认当文件下载处理；须在dragover中e.preventDefault()、dragstart中setData传ID、避免给table设draggable。

原生拖拽表格行能用，但只加 draggable="true" 一定失败——缺事件拦截、不阻止默认行为、不传数据，三者任一缺失都会卡在“拖不动”或“松手没反应”。

为什么加了 draggable="true" 还是拖不动

浏览器对 的拖拽支持极弱：它默认把拖拽当文件下载处理，drop 事件被静默拦截。关键不是“能拖”，而是“允许放”。

• 必须在 dragover 回调里调用 e.preventDefault()，否则 drop 永远不会触发
• dragstart 中必须调用 e.dataTransfer.setData('text/plain', id)，否则目标端收不到原始行标识
• 别给 或 设 draggable="true"，会拖整个容器，失去行级控制
  Safari 要求 setData 至少传空字符串，不设就直接拒绝拖拽

  drop 时怎么安全插入到目标行上方或下方

  直接用 insertBefore 或 appendChild 容易错位：比如把 A 插到 B 下方，B 若已被移走，A 就插空了。最稳的是用 before() / after() 配合鼠标 Y 坐标判断方向。

  • 在 dragover 中计算 event.clientY 相对于目标
  的位置：const rect = targetTr.getBoundingClientRect(); const isTopHalf = event.clientY
  松手时，若鼠标在上半区，执行 targetTr.before(draggedTr)；下半区则用 targetTr.after(draggedTr)
  IE11 不支持 before/after，需降级为 targetTr.parentNode.insertBefore(draggedTr, isTopHalf ? targetTr : targetTr.nextSibling)
  绝对不要重写
  .innerHTML，会清空所有 的当前值和绑定的事件监听器

  拖拽过程中如何显示插入线提示

  仅靠 :hover 不行——拖拽时鼠标常悬停在空白处，hover 不触发。必须靠 dragover 动态计算并实时加样式。

  

  财经HTML高端海报生成

  复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

  下载
  • 在 dragover 里根据上/下半区判断，给目标
  加临时类，例如 tr.insert-before 或 tr.insert-after
  CSS 用 border-top: 2px dashed #007bff（插上方）或 border-bottom: 2px dashed #007bff（插下方），避开 outline 和 box-shadow，它们在 border-collapse: collapse 下会错位
  每次新 dragover 触发前，先清除之前所有 insert-* 类，再给当前目标加，避免残留
  移动端原生 drag/drop 不可用，这类逻辑必须用 SortableJS 或 touch 事件模拟替代

  最容易被忽略的是数据同步：DOM 行序变了，但 JS 数组还按老顺序存着。如果表格绑定了表单输入或用于后续提交，不手动更新数组索引，后端收到的就是错乱顺序。纯 DOM 场景下，这个脱节问题往往拖到提交时才暴露。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！