当前位置:首页>>问题

uniapp上传图片实现拖动排序的效果

最终实现的效果是:上传的多张图片,能够上下左右的拖动实现排序的效果1、首先需要用到一个uniapp的组件,感谢作者的无私奉献,下载地址:https://ext.dcloud.net.cn/plugin?id=11714#detail 2、有了这个组件,相当于成功了一半,接着需要把插件集成到项目中去,我的项目中,上传图片功能是放在组件里面的,所以拖动图片组件

admin

微信截图_20250317234721.jpg

最终实现的效果是:上传的多张图片,能够上下左右的拖动实现排序的效果

1、首先需要用到一个uniapp的组件,感谢作者的无私奉献,下载地址:

https://ext.dcloud.net.cn/plugin?id=11714#detail

2、有了这个组件,相当于成功了一半,接着需要把组件集成到项目中去,

image.png

image.png

image.png

我的项目中,上传图片功能是放在组件里面的,所以拖动图片组件是放在上传图片组件里面的

上图中,父件使用@update="imageList_update"来接收子件返回的处理过的图片列表数据this.$emit('update',this.uploadLists)

image.png

image.png

image.png

子件通过@update="handleUpdate"来接收子子件处理过的拖动排序的图片列表数据this.$emit('update', endList);

大致流程就是这样,图片拖动排序这块其实挺复杂的,有一些拖动的位置算法啥的,再次感谢原作者的无私奉献

再一个就是一些图片大小之类的,组件和项目兼容性的问题,需要根据具体的情况去调整,要花费一些时间和精力去研究







返回顶部