原生 drag/drop 无法支持文件拖拽排序混合场景：本地文件拖入生成新项，列表内拖动仅重排DOM；需用 data-id 标识、setData/getData 区分数据源，移动端必须降级 SortableJS。
dragstart 必须设 dataTransfer.setData()，dragover 必须调用 e.preventDefault()，否则拖拽根本不会落地——这不是逻辑问题，是浏览器直接拦截了 drop。
为什么文件拖拽排序不能直接用原生 drag/drop API？
原生 HTML5 drag 事件体系不支持「拖拽文件到列表中排序」这种混合场景。你拖进来的如果是本地文件（File 对象），它和页面内已有的 <li> 不是同一类数据源；浏览器会把整个文件当作新项插入，而非重排已有项。
所谓“文件拖拽排序”，实际分两种情况：
- 把本地文件拖进页面 → 生成新列表项（上传前预览/排序）
- 在已有文件列表里拖动项调整顺序（不涉及真实文件 I/O，只改 DOM 或数组）
两者不能混用一套事件逻辑。前者走 drop 里的 e.dataTransfer.files，后者走 e.dataTransfer.getData('text/plain')。
如何让已有文件列表支持拖拽重排？
这是真正可落地的“排序”需求。关键不是处理文件，而是让列表项具备稳定标识、正确响应拖放位置。
- 每个
<li>必须带唯一data-id（别用索引，重排后索引就失效） -
dragstart中必须写：e.dataTransfer.setData('text/plain', item.dataset.id) -
dragover和drop都要调用e.preventDefault()，缺一不可 -
drop里用closest('li')找目标项，再比对clientY与目标项中线位置，决定插在它前面还是后面 - 插入时用
insertBefore(draggedElement, targetLi)或insertBefore(draggedElement, targetLi.nextSibling)，别用appendChild
移动端怎么处理？
iOS Safari 和多数安卓 WebView 完全禁用原生 draggable 属性，dragstart 根本不触发。这不是配置问题，是引擎级限制。
- 纯原生方案在此场景下失效，必须降级
- 推荐用
SortableJS，但注意：初始化前确保 DOM 已挂载，否则document.getElementById()返回null - 移动端需显式开启触摸支持：
touchStartThreshold: 10、scroll: true，否则轻触就失灵 - 若用 React/Vue，务必监听
onEnd并用不可变方式更新数组（如toSpliced()），否则视图和数据立刻脱节
容易被忽略的 DOM 细节
拖拽过程中，如果目标容器高度塌陷（比如空 <ul></ul> 没设 min-height），dragover 就捕获不到事件——鼠标悬停区域实际是空白，不是列表。
- 给容器加
min-height: 20px是最简单解法 -
dragend里记得清理临时样式（比如opacity: 0.5），否则松手后元素还半透明 - 别在
dragenter里做preventDefault()，它不持续触发，靠不住 - 测试一定要在真机上跑，桌面 Chrome 的“移动端模拟”完全无法复现 Safari 的拖拽禁用行为
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
