拖拽排序缺失占位反馈的根本原因是未正确处理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"> 插入列表中，比 CSS ::before 更可控，也避免布局抖动。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

• 在 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 更可靠。

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