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

一路向前的月光

已于 2024-02-21 17:53:12 修改

阅读量1.9k

点赞数 8

CC 4.0 BY-SA版权

分类专栏： js uniapp 文章标签： uni-app 学习

于 2024-02-21 17:52:47 首次发布

本文链接：https://blog.youkuaiyun.com/a99101/article/details/136217355

仅供学习记录和帮作者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