仅供学习记录 和帮作者shm***@163.com推广一下他的插件
如果侵权请联系我进行文章删除
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