原生拖拽表格行需正确处理dragstart、dragover和drop事件：tr设draggable="true"，dragstart中setdata，dragover中preventdefault，drop时用before/after按鼠标位置安全交换行，禁用innerhtml重写，框架中应更新数据而非dom。
原生拖拽表格行不是加个 draggable="true" 就完事——绝大多数失败都卡在 dragover 没调 event.preventDefault()，或者用 innerHTML 粗暴重写 <tbody> 导致输入框失焦、事件监听器丢失。
<h3>为什么<tr>加了draggable="true"还是拖不动
<p>浏览器默认禁止在非表单/可编辑区域接收 drop，<code>dragover 事件不阻止默认行为，drop 就永远不会触发。Safari 还额外要求 dataTransfer.setData() 必须有值，哪怕只是空字符串。
- 必须给每个
<tr> 绑定 <code>dragstart，并在回调里设event.dataTransfer.setData('text/plain', '') -
dragover回调里第一行就得写event.preventDefault()，缺一不可 - 别给
<table> 或 <code><tbody> 加 <code>draggable="true"，否则整块被拖走，失去行级控制 - IE11 不支持
before()/after()，得回退到parentNode.insertBefore(newNode, refNode) - 用
event.clientY和targetTr.getBoundingClientRect()判断鼠标在该行上半区还是下半区 - 上半区 → 执行
targetTr.before(draggedTr)；下半区 → 执行targetTr.after(draggedTr) - 绝对不要用
innerHTML = newHtmlString重写整个<tbody>，会清空所有 <code><input>的当前值和绑定的事件拖拽时如何高亮插入位置
仅靠
:hover不行——拖拽中鼠标可能悬停在空白处，CSS 无法响应。必须靠dragover动态计算并加样式。
html-to-pptx-converter下载使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 在
dragover中获取targetTr.getBoundingClientRect()的top和bottom - 若
event.clientY ，说明鼠标在上半区，给 <code>targetTr加border-top: 2px dashed #007bff - 否则加
border-bottom: 2px dashed #007bff - 每次
dragover触发前先清除之前所有行的 border 样式，避免残留 - 别用
outline或box-shadow，在border-collapse: collapse下表现异常
Vue/React项目里千万别直接操作DOM
框架接管了 DOM 更新逻辑，你手动移动
<tr>，视图不会同步，下一次 re-render 还会按原始数据顺序覆盖回来。 <ul> <li>只在纯 HTML + 原生 JS 场景下操作 DOM</li> <li>Vue 项目应更新数组顺序（如用 <code>Array.splice()调整v-for数据源），让框架驱动渲染 - 在
- React 项目同理，更新 state 中的 rows 数组，并确保 key 稳定（别用 index）
- 如果用了
html5sortable这类库，务必看它是否提供onSort回调来同步数据层
怎么安全交换两行DOM位置
直接用 appendChild() 或 insertBefore() 移动 <tr> 容易出错：比如把 A 行插到 B 行下方时，B 行若已被移走，A 可能插空或重复插入。最稳的方式是用目标行作锚点，动态决定方向。
<ul>
<li>在 <code>drop 事件中，拿到鼠标悬停的那行 targetTr
最常被忽略的是：拖拽结束后的状态清理——比如 dragstart 里加的 opacity、dragover 里加的 border 样式、以及 dragend 事件没监听导致拖拽态残留。这些细节不处理，用户会明显感觉到“卡顿”或“视觉错乱”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
