关于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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值