关于uniapp中的拖拽图片排序,类似发布朋友圈功能的组件学习

仅供学习记录 和帮作者shm***@163.com推广一下他的插件

如果侵权请联系我进行文章删除

图片拖拽排序 - DCloud 插件市场

GitHub - shmilyany/shmily-drag-image: uni-app 图片拖拽排序插件

一、项目背景

在uniapp中编写类似发布朋友圈功能时候  需要用户可以自己决定上传图片的顺序

二、基本功能组件

movable-area

可拖动区域

由于app和小程序的架构是逻辑层与视图层分离,使用js监听拖动时会引发逻辑层和视图层的频繁通讯,影响性能。为了方便高性能的实现拖动,平台特封装了movable-area组件。

movable-view

可移动的视图容器,在页面中可以拖拽滑动或双指缩放。

movable-view必须在movable-area组件中,并且必须是直接子节点,否则不能移动。

movable-view | uni-app官网 (dcloud.net.cn)

三、代码

这里代码我只写了一部分的自我理解,这个是仅供自己学习记录用 

这里面我学习下来,主要分为两个部分

1是拖拽的放大做小,xy位置判定,图片数组的插入排序

2是上传加号图片的 定位  动态计算分为几列,每一个图片大小的位置 绝对定位的计算