h5多图上传列表拖拽排序与删除可原生实现：设draggable="true"并监听dragstart/dragover/drop事件，用临界偏移策略精准插入；删除按钮绑定click调用splice更新数组；不支持draggable时降级为长按模拟拖拽。
在 H5 页面中实现多图上传列表的拖拽排序与删除，核心是结合 HTML5 Drag and Drop API 与文件管理逻辑，不依赖第三方库也能做到轻量、可控、兼容性好（支持 iOS Safari 16.4+ 和安卓 Chrome 等主流 WebView）。
启用拖拽功能：给图片项添加 draggable 属性
每个已上传的图片容器（如 <li> 或 <div>）需设置 <code>draggable="true"，并监听关键事件：
-
dragstart：记录被拖拽项的原始索引（
e.dataTransfer.setData('text/plain', index)） -
dragover：阻止默认行为（
e.preventDefault()），否则无法触发drop - drop：获取目标位置索引，结合原索引重排数组，再重新渲染列表
安全处理拖拽排序：避免误判和边界问题
仅靠视觉位置判断插入点容易出错，推荐用「临界偏移」策略：
- 监听
dragenter或dragover时，计算鼠标相对于目标元素顶部的距离（e.clientY - target.offsetTop） - 若距离小于元素高度的 1/2，则插入到该元素之前；否则插入到之后
- 特别注意首尾位置：对第一个和最后一个元素单独判断，防止索引越界
删除操作：图标点击 + 视觉反馈 + 数据同步
删除按钮建议放在图片右上角，使用半透明悬浮态，点击后立即从 DOM 移除，并同步更新数据源：
- 为删除按钮绑定
click事件，传入当前图片索引 - 调用
splice(index, 1)更新图片数组，再调用渲染函数（如renderImageList()） - 可添加淡出动画：先加
class="deleting"触发 CSS 过渡，过渡结束后再真正移除节点
移动端适配要点：弥补 touch 事件缺失
iOS 和部分安卓 WebView 对 dragstart 支持有限，需降级方案：
- 检测是否支持
draggable（'draggable' in document.createElement('span')） - 不支持时，改用长按模拟拖拽：监听
touchstart→ 计时 500ms → 触发拖拽态，后续用touchmove手动更新位置 - 所有交互操作后，记得调用
e.stopPropagation()防止触发父级滚动或缩放
