拖拽排序必须显式设置 draggable=”true”，仅监听 dragstart、dragover、drop 三个事件，其中 dragover 必须 prEventDefault 才能触发 drop；移动端不支持原生 drag/drop，需降级为 touch 事件或使用 sortablejs；排序后应维护 JS 数组 order 实时更新顺序，避免依赖 dom 排序。
拖拽排序必须开启 draggable 属性
html5 原生拖拽不是“点住就能拖”，draggable="false"。不显式设为 true，哪怕加了 dragstart 监听也完全没反应。
正确写法是给每张图加上：draggable="true"，且推荐用 JS 动态添加，避免手误漏写：
@@##@@ @@##@@注意：draggable 是布尔属性，写成 draggable="" 或 draggable="false" 都会失效；必须是 draggable="true" 或仅 draggable（等价于 true）。
关键事件只有三个：dragstart、dragover、drop
很多人卡在拖着图移入容器却没反应——根本原因是漏了 dragover 的默认行为阻止。浏览器对 drop 事件有严格限制：没触发过 dragover，drop 就永远不会触发。
立即学习“前端免费学习笔记（深入）”；
必须同时处理：
-
dragstart：存下被拖图片的索引或data-id -
dragover：只做一件事——event.preventDefault()，否则 drop 不生效 -
drop：拿到目标位置，执行 DOM 插入或数组重排
示例片段（假设所有 
const container = document.getElementById('container'); let draggedImg = null; container.addEventListener('dragstart', e => { if (e.target.tagName === 'IMG') { draggedImg = e.target; e.dataTransfer.setData('text/plain', e.target.dataset.id); } }); container.addEventListener('dragover', e => e.preventDefault()); // 必须！ container.addEventListener('drop', e => { e.preventDefault(); const target = e.target.closest('img'); // 拖到某张图上 if (!target || target === draggedImg) return; // 插入到 target 前面（实现“插在它前面”的视觉顺序） container.insertBefore(draggedImg, target); });移动端不支持原生 drag/drop，别硬套
chrome for android、safari ios 全系忽略 draggable 和相关事件。这不是 bug，是规范明确不强制实现。想在手机上用，必须换方案：
- 用
touchstart/touchmove/touchend自行模拟拖动（需计算坐标、防抖、处理 zIndex） - 引入轻量库如
sortablejs（支持 touch + 拖拽反馈 + 平滑动画） - 改用点击“上移/下移”按钮的降级交互，更可控
强行加 draggable 在手机上只会白忙一场，连 console 都不会报错。
图片排序后，如何拿到新顺序？
DOM 重排只是视觉变化，业务通常需要提交新顺序 ID 列表。别遍历 img 再读 dataset.id——顺序可能受 css flex-direction 或 grid 影响而错乱。
稳妥做法是监听每次 drop 后，直接同步更新一个 JS 数组：
// 初始化顺序 let order = ['1', '2', '3']; // drop 后更新 container.addEventListener('drop', e => { const id = draggedImg.dataset.id; const targetId = e.target.closest('img')?.dataset.id; if (!targetId) return; const oldIndex = order.indexOf(id); const newindex = order.indexOf(targetId); // 移除再插入到 newIndex 前 order.splice(oldIndex, 1); order.splice(newIndex, 0, id); });最后提交时发 order 数组，而不是靠 DOM 顺序推导——这是最容易被忽略、但上线后最常出问题的一环。
