uniapp使用movable-view容器实现九宫格拖拽排序功能

功能包括：选择多张图片上传，单击预览图片，长按拖拽排序，本文主要讲解拖拽排序的实现

效果图如下：

实现思路：

1.定义imgList数组，存放图片元素；

2.长按图片时记录当前移动元素index，简称moveId；

3.移动时，记录结束位置，计算结束位置的index，简称moveToId;

4.移动结束，记录原来的元素信息imgList[moveId]，使用splice方法删除moveId元素，添加moveToId元素

5.利用归位函数为movable-view的x、y赋值，将元素归位

代码片段：

<template>
	<movable-area class="img-container">
		<movable-view
			class="wrapper"
			v-for="(item, index) in imgList"
			:key="index"
			:x="item.x"
			:y="item.y"
			direction="all"
			:animation="false"
			:disabled="!isMove"
			@change="moveStatus"
			@longpress="moveStart"
			@touchend="moveEnd"
			:data-moveid="index"
			:style="{ zIndex: index == moveId ? 2 : 1 }"
		>
			<image
				class="image"
				mode="aspectFill"
				:src="item.img"
				@click="preview(item)"
				:class="{ active: index == moveId, shadow: index == moveToId }"
				@load="hideLoading"
			/>
			<text class="close-icon" @click="deletePic(index)">&#xe6e8;</text>
		</movable-view>
		<view class="wrapper" :style="{ transform: translate }">
			<view class="add" @click="addImg" v-if="imgList.length < 9">
				<text class="default-icon">&#xe71b;</text>
				<text class="tips">点击上传图片</text>
			</view>
		</view>
	</movable-area>
</template>

// data
isMove: boolean = false;
moveId: number = -1; //移动的是哪个元素块
moveToId: number = -1; //移动到是哪个元素块
endX: number = 0; //最终停止的位置
endY: number = 0;
imgList: any[] = [
// {
// 	img: '',
// 	x: 0,
// 	y: 0
// },
];
...
// 下方为主要的js逻辑
moveStart(e) {
// 注意：点击预览图片时会触发moveEnd方法，使用isMove用来判断是否可移动
this.isMove = true;
// 记录移动元素的index
this.moveId = e.currentTarget.dataset.moveid;
// 初始化moveToId
this.moveToId = this.moveId;
}
moveStatus(e) {
//移动的块ID
if (e.detail.source == 'touch') {
//最终坐标
this.endX = e.detail.x;
this.endY = e.detail.y;
//计算移动结束的index值
let range:number = this.deviceWidth*110/375;
let x:number = Math.floor(this.endY / range);
let y:number = Math.floor(this.endX / range);
this.moveToId =x * 3 + y
}
}
moveEnd(e) {
if (!this.isMove) {
// 点击预览时不作为
return false;
}
let newList:any = this.deepCopy(this.imgList);
// 重新排序imgList
// 注意，下方步骤是将移动后的坐标赋给imgList，避免重新归位的时候dom不更新
if (this.moveId == this.moveToId) {
// 如果未改变位置
this.$set(this.imgList[this.moveId], 'x', this.endX*2+'rpx');
this.$set(this.imgList[this.moveId], 'y', this.endY*2+'rpx');
} else {
let obj: any = JSON.parse(JSON.stringify(this.imgList[this.moveId]));
newList.splice(this.moveId, 1);
newList.splice(this.moveToId, 0, obj);
// 更新dom
newList.forEach((item, i) => {
this.$set(this.imgList[i], 'img', item.img);
this.$set(this.imgList[i], 'x', this.endX*2+'rpx');
this.$set(this.imgList[i], 'y', this.endY*2+'rpx');
});
}
// 将重新排序的数组归坑
this.$nextTick(function() {
setTimeout(() => {
this.initMove();
}, 100);
});
}
initMove() {
// 将九张图片按顺序归位（移动，添加，删除）
let list:any = this.deepCopy(this.imgList);
list.forEach((item, index) => {
let row = Math.ceil((index + 1) / 3);
let col = index % 3;
this.$set(this.imgList[index], 'x', 230 * col+'rpx');
this.$set(this.imgList[index], 'y', 230 * (row - 1)+'rpx');
});
// 样式回归(选中的透明度和移动结束位置的遮罩样式根据moveId和moveToId变化)
this.moveId = -1;
this.moveToId = -1;
this.isMove = false;
}
deepCopy(obj) {
// 深拷贝对象
if (typeof obj !== 'object') return;
// 根据obj的类型判断是新建一个数组还是一个对象
let newObj = obj instanceof Array ? [] : {};
for (let key in obj) {
// 遍历obj,并且判断是obj的属性才拷贝
if (obj.hasOwnProperty(key)) {
// 判断属性值的类型，如果是对象递归调用深拷贝
newObj[key] = typeof obj[key] === 'object' ? this.deepCopy(obj[key]) : obj[key];
}
}
return newObj;
}

注意问题：

1.移动后执行归位函数，dom不更新

官方解释查看

原因：当重复设置某些属性为相同的值时，不会同步到view层。 每次将movable-view组件的x和y属性值设置为相同的值，只有第一次能顺利归位。 这和props的单向数据流特性有关，组件内部x、y的实际值改动后，其绑定的属性并不会一同变化。

解决方案：在moveStatus中记录移动值，在结束时赋给移动元素的x和y，dom更新后赋予归位数值。

2.另一种排序思路

移动结束后，将endX和endY赋给imgList[moveId]，然后定义sort排序方法，将imgList重新排序。

文档下载：uniapp使用movable-view容器实现九宫格拖拽排序功能.doc文档