拖拽排序缺失占位反馈的根本原因是未正确处理dragover事件默认行为或未动态调整DOM顺序；需在dragover中调用preventDefault()启用drop，用轻量placeholder元素结合clientY与getBoundingClientRect实时定位，通过insertBefore/appendChild更新位置，并在drop后移除placeholder。

拖拽排序时没有占位反馈，本质是没正确处理 dragover 事件的默认行为，或没用 insertBefore / appendChild 动态调整 DOM 顺序。

为什么 dragover 必须调用 preventDefault()

浏览器默认会阻止元素被拖入大多数目标区域，不调用 preventDefault()，drop 事件根本不会触发，更别说占位了。

• 只在需要接受拖拽的容器上监听 dragover，并在回调里立刻写 event.preventDefault()
• 别在 dragenter 里做这事——它可能被频繁触发（比如跨子元素移动），而 dragover 更稳定
• 如果用了 event.dataTransfer.effectAllowed = 'move'，也要确保 dragover 中同时设 event.dataTransfer.dropEffect = 'move'

怎么生成实时占位条（不靠伪元素）

用一个轻量、无内容的 <li class="placeholder"></li> 插入列表中，比 CSS ::before 更可控，也避免布局抖动。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• 在 dragover 回调里，用 event.clientY 对比每个目标 <li> 的 getBoundingClientRect().top 和 bottom，判断鼠标是否在该元素「下半区」
• 找到插入位置后，先移除旧的 .placeholder（如果有），再用 insertBefore(placeholder, targetLi) 或 appendChild(placeholder) 放到末尾
• .placeholder 的 CSS 只需设 height: 24px + border-top: 2px dashed #007bff，不占空间、不触发重排

drop 事件里怎么安全移动真实节点

别直接用 appendChild 把拖拽项加到容器末尾——这会丢失语义顺序；要根据占位符位置还原逻辑索引。

立即学习“前端免费学习笔记（深入）”；

• 在 dragstart 阶段，把被拖元素的 dataset.index 或引用缓存到 dataTransfer： event.dataTransfer.setData('text/plain', String(index))
• drop 触发时，先查当前 .placeholder 的 index（用 Array.from(ul.children).indexOf(placeholder)），再按此位置用 insertBefore(draggedEl, targetLi) 插入
• 务必在 drop 结束后立即移除 .placeholder，否则下次拖拽会错位

占位反馈最常出问题的地方不是逻辑，而是对 dragover 触发频率和 DOM 插入时机的误判——它每毫秒都可能触发多次，所有操作必须轻量且幂等。用 requestAnimationFrame 节流占位符更新，比加 setTimeout 更可靠。