原生HTML拖拽排序需手动计算插入位置：通过dragover中preventDefault()阻止默认行为，在dragstart存图片ID，dragover时用clientY对比每个图片的boundingRect判断插入缝隙，再用insertBefore实现精准插入。
原生 HTML 的 draggable 属性 + dragstart/dragover/drop 事件能实现图片拖拽排序，但默认行为不支持“插入到两个元素之间”的视觉反馈，必须手动计算位置并操作 DOM —— 这是绝大多数人卡住的地方。
为什么 dragover 默认阻止不了浏览器的文件打开行为
拖拽图片时，如果没在 dragover 事件里调用 event.preventDefault()，浏览器会按默认逻辑尝试打开或下载该图片，导致 drop 事件根本不会触发。
- 必须在绑定
dragover的同时立即preventDefault()，仅写event.stopPropagation()不够 -
dragenter里调用preventDefault()无效，它不控制 drop 可否发生 - 目标容器需设置
droppable="true"（非必需，但部分旧版 Safari 要求）
如何判断图片该插在第几个位置（而非只替换）
靠 event.clientY 对比每个图片的 getBoundingClientRect().top 和 .bottom，算出鼠标当前处于哪个“缝隙”中 —— 这才是插入排序的核心逻辑，不是简单 appendChild。
- 遍历所有
<img>元素，获取它们的boundingClientRect - 当
clientY > rect.top && clientY < (rect.top + rect.height / 2)，说明应插在它前面 - 把目标
<img>用insertBefore(draggedImg, targetImg)插入，而不是append - 注意：拖拽中
draggedImg仍存在于原位，需先remove()再重新插入，否则会复制
dragstart 里只能传字符串，怎么记住是哪张图
dataTransfer.setData('text/plain', ...) 只能设字符串，但你可以塞 ID、索引或自定义 key，只要后续能反查到对应 DOM 节点即可。
立即学习“前端免费学习笔记（深入）”；
- 推荐给每张
<img>加data-index="0"或id="img-123"，dragstart中读取并存入dataTransfer - 不要存整个
src字符串再比对 —— 图片可能重复，且性能差 - 避免用
dataTransfer.setDragImage()自定义拖拽图标，它在移动端无效，且容易干扰位置计算
真正难的不是监听事件，而是拖拽过程中实时渲染插入线、处理快速移动时的位置抖动、以及兼容 Safari 对 dataTransfer.items 的限制 —— 这些细节不写死逻辑，光靠文档很难调通。
