关键在于监听 dragover 事件并调用 event.preventDefault()；再通过 event.clientY 与 target.getBoundingClientRect() 计算 offset = event.clientY - rect.top，若 offset 小于高度一半则为上方，否则为下方。
拖拽时如何判断目标位置在某个列表项的上方还是下方
关键在于监听 dragover 事件并调用 event.preventDefault()，否则默认行为会阻止拖放；接着通过 event.clientY 和目标元素的 getBoundingClientRect() 计算相对偏移，判断光标是否落在元素上半区或下半区。
- 获取目标
li元素的布局信息：const rect = target.getBoundingClientRect() - 计算鼠标相对于该元素顶部的垂直距离：
const offset = event.clientY - rect.top - 若
offset ，说明应插入到该li上方；否则插入到下方 - 注意：必须在
dragover中持续判断，不能只依赖drop事件——因为drop触发时目标已固定，无法反映“悬停中”的位置意图
如何在 drop 时正确交换两个 li 的 DOM 位置
HTML5 拖放不自动移动元素，需手动操作 DOM。最稳妥的方式是用 insertBefore 或 after/before 方法，避免直接用 appendChild 导致节点被移走后丢失引用。
function moveItem(dragged, target, isAbove) {
const list = dragged.parentElement;
if (isAbove) {
list.insertBefore(dragged, target);
} else {
list.insertBefore(dragged, target.nextSibling);
}
}-
target.nextSibling可能为null（目标是最后一个），此时insertBefore(el, null)等价于appendChild(el)，安全 - 不要用
target.parentNode.insertBefore(dragged, target)后再删 target——这容易因重复插入引发错乱 - 确保
dragged和target属于同一父容器，否则需先remove()再插入，但排序场景通常满足同级条件
为什么 dragstart 里设置 DataTransfer 不影响排序逻辑
dataTransfer.setData() 在排序中基本无用，因为你要操作的是 DOM 节点本身，不是传输数据。很多教程误写 setData('text/plain', ...)，其实只要在 dragstart 中保存对被拖元素的引用即可。
- 推荐做法：在
dragstart中把event.target存到闭包或dataset，例如event.dataTransfer.draggedElement = event.target - Chrome/Firefox 支持自定义属性挂载，但更兼容的做法是用全局变量或 WeakMap 缓存：
draggedItem = event.target - 切勿依赖
dataTransfer.types或解析getData()来还原元素——它只适用于跨应用拖放，DOM 内排序不需要序列化
移动端 Safari 对 HTML5 拖放的支持问题怎么绕过
iOS Safari 直到 iOS 16.4 才完整支持 drag 系列事件，且默认禁用。用户必须手动开启「辅助功能 → 拖拽」，绝大多数场景不可靠。真实项目中应降级为基于 touchstart/move/end 的模拟拖拽。
立即学习“前端免费学习笔记（深入）”；
- 检测是否支持：
'draggable' in document.createElement('span')仅检查属性，需进一步测事件：!!document.createElement('div').ondragstart - 不支持时，监听
touchstart记录初始位置和目标元素，用transform: translateY()模拟悬浮效果，touchend触发位置交换 - 第三方库如
sortablejs内部已处理该兼容性，但若需轻量方案，避免引入整套
真正的难点不在交换逻辑，而在于视觉反馈节奏和 touch 与 mouse 事件的隔离——稍有延迟就会让用户觉得“卡住”或“点歪了”。
