图片上传、拖拽排序
最近的项目中遇到这样一个需求，要求在上传图片时可多图片上传，并且可以拖拽排序。前面多图片上传比较好实现，网上一大片的教程、插件可供学习使用，可又要求可以拖拽排序，我也没找到现有的代码，自己也就研究着尝试实现了下，实现的结果还是比较好的。大家有需要的可以参考下。 废话不多说，直接上代码。 HTML代码： <div class="wrapConatiner"> <div class="btn_wrapper"> <!--不使用file的默认样式,隐藏file选择框,使用button的click事件触发选择文件--> <input type="file" name="files" id="files" multiple style="display: none;" data-name="files1"/> <button class="btn"></button> </div> <!-- 放置上传后图片的容器 --> <div class="img_wrapper"> <ul></ul> </div> </div> CSS代码： .img_wrapper { width: 100%; display: flex; flex-wrap: wrap; } .dragWrapper { position: relative; width: 100%; height: 208px;