layui upload 不支持拖拽排序，因其仅负责文件选择、上传和回调，不维护dom顺序或提供拖拽事件；必须用sortable.js接管预览容器，并同步更新文件数组、表单字段（如fileorder）及后端逻辑。

不能靠 upload.render() 配置里的 multiple: true 实现拖拽排序——它只控制多选，不管理上传后 dom 的顺序。

为什么 upload 自身不支持拖拽排序

Layui upload 模块的职责非常明确：监听选择、发请求、回调 done，然后把结果 append 到你指定的容器（比如 layui-upload-list）里。它不维护 DOM 顺序，也不暴露拖拽相关事件（如 onDragStart）。你看到的预览列表只是静态 <img> 或 <div class="layui-upload-file">，没有交互能力。 <ul> <li>给 <code><img> 加 draggable="true" 会触发浏览器默认文件拖出行为，不是列表内重排

dragstart/dragover/drop 手动监听要算插入位置、处理边界、防重复，极易出错且移动端完全失效

上传过程中若混入 loading 占位图，原生 drag 会把它一起拖，状态混乱

必须用 Sortable.js 接管预览容器

这是当前最稳定、兼容性最好、Layui 项目中落地最多的方案。关键不是“能不能”，而是“怎么接得不打架”：

• 初始化时机必须在 done 回调执行完、DOM 真实插入后，否则 Sortable 找不到目标元素
• el 必须指向 layui-upload-list 的父容器（通常是 <div class="layui-upload-list">），不能是里面某个 <code><img>
• 加 animation: 150 让拖拽有视觉反馈，避免用户觉得卡顿
• 移动端必须设 forceFallback: true，否则 iOS Safari 静默失败（它不触发 dragstart）
• 在 onEnd 里用 evt.oldIndex 和 evt.newIndex 调整你维护的文件数组（如 uploadedFiles = []）

别忘了同步更新表单字段和后端接收逻辑

拖拽只改了 DOM 顺序，但提交时后端仍按原始顺序处理——除非你显式传新顺序：


深蓝色网站后台管理系统layui框架模板-AdminPro
一款深蓝色网站后台管理系统layui框架模板
下载
• 把新顺序存回隐藏域，例如：<input name="fileOrder" value="3,1,4,2">
• 后端必须依赖这个 fileOrder 字段做索引重排，不能只按 request.files 的接收顺序处理
• 如果上传列表里有删除按钮，删掉某项后要重新生成 fileOrder 值，避免索引断层
• 预览容器的 CSS 需补 position: relative，否则 ghostClass 绝对定位会错位

真正麻烦的不是拖拽本身，而是 DOM、内存数组、表单字段三者状态不同步——拖完没更新 fileOrder，或者后端忽略该字段，就等于白做。