关于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是上传加号图片的 定位  动态计算分为几列，每一个图片大小的位置 绝对定位的计算

<template>
	<view class="con">
		<template v-if="viewWidth">
			<movable-area class="area" 
			:style="{ height: areaHeight }" 
			@mouseenter="mouseenter"
			@mouseleave="mouseleave">
			<movable-view 
				v-for="(item, index) in imageList" 
				:key="item.id" 
				class="view" 
				direction="all" 
				:y="item.y"
				:x="item.x"
				:damping="40"
				:disabled="item.disable" 
				@change="onChange($event, item)"
				@touchstart="touchstart(item)" 
				@mousedown="touchstart(item)" 
				@touchend="touchend(item)"
				@mouseup="touchend(item)" 
				:style="{
					width: viewWidth + 'px', 
					height: viewWidth + 'px', 
					'z-index': item.zIndex, 
					opacity: item.opacity 
			}">
				<view class="area-con" :style="{
					width: childWidth, 
					height: childWidth, 
					borderRadius: borderRadius + 'rpx',
					transform: 'scale(' + item.scale + ')' 
					}">
						<image class="pre-image" :src="item.src" mode="aspectFill"></image>
						<view class="del-con" @click="delImages(item, index)" @touchstart.stop="delImageMp(item, index)"
							@touchend.stop="nothing()" @mousedown.stop="nothing()" @mouseup.stop="nothing()">
							<view class="del-wrap">
								<image class="del-image"
									src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyBjbGFzcz0iaWNvbiIgd2lkdGg9IjIwMHB4IiBoZWlnaHQ9IjIwMC4wMHB4IiB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTYyNS40MjUzMDYgNjgxLjU4OTQ2NmwtMTE1LjQ3Mjk0MS0xMTUuNDcyOTQxLTExNS40NzE5MTggMTE1LjQ3Mjk0MS01NC4xMTc1NDgtNTQuMTE4NTcyIDExNS40NzE5MTgtMTE1LjQ3MTkxOC0xMTUuNDcxOTE4LTExNS40NzI5NDEgNTQuMTE3NTQ4LTU0LjExNzU0OCAxMTUuNDcxOTE4IDExNS40NzE5MTggMTE1LjQ3Mjk0MS0xMTUuNDcxOTE4IDU0LjExNzU0OCA1NC4xMTc1NDgtMTE1LjQ3Mjk0MSAxMTUuNDcyOTQxIDExNS40NzI5NDEgMTE1LjQ3MTkxOEw2MjUuNDI1MzA2IDY4MS41ODk0NjZ6TTc4MC41NDMxNzYgMjQxLjQwOTE4OWMtMTQ4LjgyNDUzNy0xNDguODI0NTM3LTM5Mi4zNTY