uniapp上传图片实现拖动排序的效果
最终实现的效果是:上传的多张图片,能够上下左右的拖动实现排序的效果1、首先需要用到一个uniapp的组件,感谢作者的无私奉献,下载地址:https://ext.dcloud.net.cn/plugin?id=11714#detail 2、有了这个组件,相当于成功了一半,接着需要把插件集成到项目中去,我的项目中,上传图片功能是放在组件里面的,所以拖动图片组件
最终实现的效果是:上传的多张图片,能够上下左右的拖动实现排序的效果
1、首先需要用到一个uniapp的组件,感谢作者的无私奉献,下载地址:
https://ext.dcloud.net.cn/plugin?id=11714#detail
2、有了这个组件,相当于成功了一半,接着需要把组件集成到项目中去,
我的项目中,上传图片功能是放在组件里面的,所以拖动图片组件是放在上传图片组件里面的
上图中,父件使用@update="imageList_update"来接收子件返回的处理过的图片列表数据this.$emit('update',this.uploadLists)
子件通过@update="handleUpdate"来接收子子件处理过的拖动排序的图片列表数据this.$emit('update', endList);
大致流程就是这样,图片拖动排序这块其实挺复杂的,有一些拖动的位置算法啥的,再次感谢原作者的无私奉献
再一个就是一些图片大小之类的,组件和项目兼容性的问题,需要根据具体的情况去调整,要花费一些时间和精力去研究