请阐述用 JavaScript 完成拖拽排序列表并持久化排序结果的具体实现方式。

回答思路

1. 【回答框架 1】拖拽排序的核心是监听 dragstart、dragover 和 drop 事件。在 dragstart 中记录被拖拽元素的索引，dragover 中调用 preventDefault 以允许放置，drop 中获取目标索引并调整数组顺序。
2. 【回答框架 2】视觉反馈可通过在元素上添加样式类实现，如高亮放置位置。为提升性能，建议使用 DocumentFragment 或 requestAnimationFrame 批量更新 DOM。
3. 【回答框架 3】顺序持久化可监听排序完成事件，将最新顺序序列化为 JSON 存入 localStorage，或通过防抖函数异步发送至服务器。
4. 【回答框架 4】注意边界情况，如拖拽到自身位置、快速连续拖拽，以及移动端触摸事件与鼠标事件的兼容处理，可采用 pointer events 统一处理。
5. 【关键点 1】使用 HTML5 拖放 API 的 dragstart、dragover、drop 事件。
6. 【关键点 2】通过数组或索引管理顺序，避免直接频繁操作 DOM。
7. 【关键点 3】持久化顺序需在排序行为稳定后触发保存。
8. 【关键点 4】兼容移动端需考虑 touch 事件或使用库。
9. 【易错点 1】缺失 dragover 的 preventDefault 会导致 drop 不触发。
10. 【易错点 2】直接操作 DOM 内联样式可能造成大量重排，需批量更新。
11. 【易错点 3】持久化时未经防抖可能产生过多请求。