应使用drop事件而非dragend触发保存，因dragend可能在元素未落位时触发；需preventdefault()阻止默认行为，序列化排序数据为json数组发送，php端用file_get_contents('php://input')解析并校验，前端禁用重复提交、后端用预处理语句更新。
拖放结束后怎么触发Ajax保存
拖放（dragend）本身不带提交语义，直接绑定 fetch 或 $.ajax 很容易漏掉数据序列化或重复触发。关键不是“什么时候发”，而是“发什么”和“发完怎么收”。
- 别在
dragend里直接发请求——它可能在元素还没真正落位时就触发（比如鼠标松开但还在拖拽阴影上） - 改用
drop事件，且必须配合event.preventDefault()，否则浏览器会尝试导航或刷新 - 从被拖元素和目标容器中提取结构化数据，例如：
data-id、data-order、dataset.targetId - 把排序结果组装成数组，如
[{"id":1,"order":0},{"id":3,"order":1}]，再用JSON.stringify()发送
PHP后端怎么接收并验证拖放顺序
PHP 不会自动解析 JSON 请求体，$_POST 为空是常态。必须手动读取原始输入，并做基础校验。
- 用
file_get_contents('php://input')获取原始 JSON 字符串，再用json_decode($raw, true)解析 - 检查
json_last_error()，避免空或非法 JSON 导致静默失败 - 对每个条目验证
id和order是否为整数，拒绝缺失字段或负序号 - 不要直接拼 SQL，用预处理语句批量更新，例如：
UPDATE items SET sort_order = ? WHERE id = ?
为什么保存后页面位置会跳回顶部
不是 Ajax 问题，而是你没拦住表单默认行为。哪怕没写 <form></form>，只要拖拽目标是 <button></button> 或可聚焦元素，点击/释放时仍可能触发 submit。
- 确认所有参与拖放的按钮都显式声明
type="button"，否则浏览器按type="submit"处理 - 如果用了
<form></form>包裹拖放区域，必须在submit事件里调用event.preventDefault() - 滚动位置丢失通常发生在 DOM 被整体替换时，应只更新受影响的
<li>或<div>，而非重绘整个列表 <h3>防重复提交和错误反馈怎么加</h3> <p>拖放操作快，用户可能连拖两次，后端来不及响应，前端就又发了一次请求——这是最常被忽略的并发坑。</p> <ul> <li>在 <code>drop触发后立即禁用目标区域（el.style.pointerEvents = 'none'），成功后再恢复 - 用
AbortController控制请求生命周期，新拖放开始时 abort 上一个未完成的请求 - PHP 返回的 JSON 必须含
success和message字段，前端根据success决定是否重排 DOM，而不是仅靠 HTTP 状态码 - 错误提示不要只塞进
console.log，要在目标区域旁插入<small class="error"></small>并设 3 秒自动移除
drop 当成“提交完成信号”，而忽略了浏览器仍可能执行默认行为——这点在 Chrome 和 Safari 中表现尤其隐蔽。
