拖拽排序必须显式设置 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 插入或数组重排
示例片段（假设所有 Chrome for Android、Safari iOS 全系忽略 强行加 DOM 重排只是视觉变化，业务通常需要提交新顺序 ID 列表。别遍历 稳妥做法是监听每次 最后提交时发 
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，别硬套
draggable 和相关事件。这不是 bug，是规范明确不强制实现。想在手机上用，必须换方案：
touchstart/touchmove/touchend 自行模拟拖动（需计算坐标、防抖、处理 zIndex）sortablejs（支持 touch + 拖拽反馈 + 平滑动画）draggable 在手机上只会白忙一场，连 console 都不会报错。图片排序后，如何拿到新顺序？
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 顺序推导——这是最容易被忽略、但上线后最常出问题的一环。
