最稳的是HTML5 Drag and Drop API；需为每个<li>设draggable="true"，在dragstart中用setData存唯一ID，dragover和drop中均调用preventDefault()，用insertBefore调整DOM顺序，移动端须降级处理。
拖拽排序前端用哪个 API 最稳？
直接上 HTML5 Drag and Drop API，别碰第三方库（比如 Sortable.js）除非你真需要跨浏览器兼容 IE —— 现代项目里它反而容易埋坑：事件冒泡错乱、dragstart 里拿不到 dataTransfer、移动端默认不触发。用原生 API 的关键是把 dragstart 和 dragover 控制在 <li> 级别，且必须给每个可拖项加 draggable="true"。
常见错误现象：dragend 触发了但顺序没变 → 没阻止 dragover 默认行为；拖到空白处松手后 item 消失 → 没监听 drop 或没调 event.preventDefault()。
- 每个
<li>必须设draggable="true"，否则拖不动 -
dragstart里用event.dataTransfer.setData("text/plain", event.target.dataset.id)存 ID，别存 HTML 或 index -
dragover和drop都要调event.preventDefault()，否则 drop 不生效 - 用
insertBefore()或appendChild()调整 DOM 顺序，别靠 CSS order 或 flex 排序 —— 后端只认 DOM 顺序
PHP 怎么接收并保存新顺序？
前端提交的不是“移动了第 2 个到第 5 位”，而是整个有序 ID 列表，比如 POST["order"] = ["101", "98", "105", "99"]。PHP 端不做任何位置计算，直接遍历数组，用键（key）当新排序值，值（value）当记录 ID：
$order = $_POST['order'] ?? [];
foreach ($order as $newSort => $id) {
$stmt = $pdo->prepare("UPDATE items SET sort_order = ? WHERE id = ?");
$stmt->execute([$newSort, (int)$id]);
}
注意：不要用 ORDER BY sort_order 做前端渲染依据 —— 如果中间删过数据，sort_order 可能不连续，但只要唯一且可比较，就足够排序。避免用自增字段做排序依据，否则插入/删除后重排成本高。
立即学习“PHP免费学习笔记（深入）”；
-
sort_order字段类型建议用INT或SMALLINT，别用FLOAT（浮点精度问题） - 前端提交前校验 ID 是否全为数字、是否重复、是否存在于当前用户数据中，PHP 端也要再查一遍
- 批量更新用事务包裹，防止部分写入失败导致顺序错乱
拖拽时如何防抖 & 避免重复提交？
用户快速拖两次、松手前晃动一下，很容易触发多次 drop，进而发多遍请求。不能靠前端 JS 节流完事 —— 网络延迟或重试会让后端收到重复请求。
核心是加幂等性控制：前端每次拖拽生成唯一 drag_session_id（比如用 Date.now() + Math.random()），随排序数据一起 POST；后端存进缓存（如 Redis），有效期 30 秒，收到相同 ID 直接返回成功，不执行 DB 更新。
- PHP 缓存键建议用
"drag:" . md5($sessionId)，避免特殊字符问题 - 不要用时间戳做唯一标识 —— 并发时可能撞车，必须加随机因子
- 如果业务允许最终一致性，可以只在前端禁掉按钮+loading 状态，但后端仍需兜底
移动端拖拽支持怎么处理？
iOS Safari 和 Android Chrome 对 Drag and Drop API 支持极差，dragstart 根本不触发。别硬扛，降级方案是：检测 'ontouchstart' in window，如果是触屏设备，改用长按 + 手势滑动模拟排序（类似 iOS 备忘录），或者干脆切回点击“上移/下移”按钮。
真实场景里，90% 的移动端管理后台用户其实不介意多点两下 —— 强行搞拖拽反而操作出错率更高。如果非得做，用 Pointer Events 替代，监听 pointerdown + pointermove，但要注意 touch-action: none 阻止滚动冲突。
- 别用
touchstart+touchmove模拟，iOS 会吞掉后续事件 - 移动端拖拽反馈必须明显：被拖项放大、半透明、带阴影，否则用户不知道拖动生效了
- 长按触发阈值设 300ms，太短易误触，太长用户以为卡了
