draggable="true"没反应是因为它仅开启拖拽开关，不自动绑定事件；必须手动监听dragstart并调用setData()、在dragover中preventDefault()，且移动端原生不支持。
draggable="true" 为什么没反应？
因为 draggable="true" 只是开启原生拖拽能力，不绑定任何行为。浏览器默认只对图片、链接、选中文本等元素启用拖拽，对 <li> 或 <div> 这类普通元素设了 draggable="true" 后，仍需手动处理 dragstart、dragover、drop 等事件，否则光标变拖拽样式但放不下、不排序。
常见错误现象：dragstart 里没调用 event.dataTransfer.setData()，导致后续 drop 时 dataTransfer 为空；或忘了在 dragover 中调用 event.preventDefault()，结果浏览器拦截了 drop 事件。
-
dragstart：必须设置dataTransfer.setData('text/plain', event.target.id)（或任意键值），否则drop拿不到来源信息 -
dragover：必须加event.preventDefault()，否则无法触发drop -
drop：需自己实现插入逻辑，浏览器不会自动交换 DOM 节点位置
如何让列表项拖到目标位置后正确插入？
不能依赖 event.target 直接 append —— 它可能是父容器、空隙或子元素。真实场景中，用户想把 A 拖到 B 和 C 之间，B 和 C 是同级 <li>，此时应把 A 插入到 C 前面（即 C.before(A)），而不是追加到容器末尾。
推荐做法：在 dragover 阶段动态计算鼠标相对于目标项的垂直位置（event.clientY vs target.getBoundingClientRect().top），标记“插入点在上方”或“在下方”，再在 drop 时用 insertBefore() 或 before()/after() 精确落位。
立即学习“前端免费学习笔记（深入）”；
示例关键逻辑：
let insertPosition = 'before'; // or 'after'
listItem.addEventListener('dragover', e => {
e.preventDefault();
const rect = e.target.getBoundingClientRect();
const midY = rect.top + rect.height / 2;
insertPosition = e.clientY < midY ? 'before' : 'after';
});
listItem.addEventListener('drop', e => {
e.preventDefault();
const dragged = document.getElementById(e.dataTransfer.getData('text/plain'));
if (insertPosition === 'before') {
e.target.before(dragged);
} else {
e.target.after(dragged);
}
});
移动端 Safari 不支持原生 draggable 怎么办？
iOS Safari（包括 iPadOS）从 iOS 15.4 开始才部分支持 draggable，且对非 <img> 元素行为不稳定，常出现拖拽卡顿、drop 不触发、touch 事件冲突等问题。这不是代码写错了，是浏览器限制。
可行方案只有两个：
- 降级为 touchstart/move/end 手动模拟：监听
touchstart记录初始位置，touchmove更新绝对定位的拖拽层，touchend触发重排 —— 工作量大但可控 - 引入轻量库如
sortablejs，它内部已封装了移动端兼容逻辑，只需new Sortable(listEl, { animation: 150 })
注意：不要尝试用 pointerdown + preventDefault() 强行启用 Safari 的 draggable，会破坏滚动和点击。
拖拽过程中如何视觉反馈当前插入位置？
纯 CSS 无法感知“即将插入到某元素前/后”，必须靠 JS 动态添加临时占位符或边框提示。最简方案是给目标项加一个 class，比如 drag-over-before，配合 CSS 显示上边框；另一个 class drag-over-after 显示下边框。
关键点：
- 只在
dragover时添加 class，在dragleave时移除，避免残留 - 不要用
transition做插入线动画，dragover触发频繁，CSS 动画会卡顿 - 如果列表有分组或嵌套，需判断
event.target是否为可排序的直接子项，避免高亮到外层容器
容易被忽略的是：拖拽源元素在 dragstart 后仍占据文档流，导致插入线位置偏移。建议在 dragstart 中给它加 opacity: 0.5 或 transform: scale(0.98)，但不要用 display: none 或 visibility: hidden，否则 getBoundingClientRect() 会失效。
