Uni-app/小程序拖拽排序实现方法

最新推荐文章于 2024-07-23 17:56:27 发布

Zomboy

最新推荐文章于 2024-07-23 17:56:27 发布

阅读量1.5k

点赞数

分类专栏：小程序文章标签：小程序 javascript 开发语言

本文链接：https://blog.csdn.net/mhblog/article/details/125402471

版权

小程序专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这篇博客详细介绍了如何利用uni-app中的movable-area组件实现一个拖拽排序的功能。通过监听触摸事件，动态调整元素位置，并在松开手指时判断元素是否放置到正确位置，从而实现排序并更新视图。此外，还提供了重置和提交排序的功能。

摘要由CSDN通过智能技术生成

首先用movable-area制作一个拖拽的范围

				<movable-area class="easydrags" id="areaBox0">
					<view class="easydragQuestion" >
						<view class="easydragitem font-16 " @touchstart.stop="touchStart(index,$event)" @touchmove="touchMove" @touchend="touchEnd(item,index)"
							v-for="(item,index) in easydragQues" :key="index" :id="'appLi' + index">
							{{item.key}}
						</view>
					</view>
					<movable-view v-if="moviewShow" :key="index" :animation="false"  :x="moveX" :y="moveY" direction="all"   class="easydragmov font-16 " mode="widthFix">
						{{touchItem}}
					</movable-view>
					<view class="amswerTxt font-16 cl-black font-weight5 padding-top-8 padding-bottom-8"> 排序结果</view>
					<view class="easydragAnswer" >
					<view class="easydragitem font-16" v-for="(item,index) in easydragAnswer" :key="index">
						<view v-if="submitIf" :class="item.isCorrectIf?'cl-00A475':'cl-F94600'">{{item.key}}</view>
						<view class="wh" v-if="!submitIf">{{item.key}}</view>
					</view>
					<view v-if="submitIf">
						<image v-if="!questions.isElectIf" class="result_img padding-right-20":src="imageUrl + 'tzCha.png'" mode="aspectFit"></image>
						<image v-if="questions.isElectIf" class="result_img padding-right-20":src="imageUrl + 'tzGou.png'" mode="aspectFit"></image>
					</view>
					</view>
					<view v-if="isMove" @tap="reorderSubmit" class="reorder_submit position-a font-18 cl-white bg-00A475 text-center">提 交</view>
					<view v-if="isStartover" @tap="reorderStartover" class="reorder_startover position-a font-18 cl-white bg-00A475 text-center">重 来</view>
				</movable-area>

在这里插入图片描述

			getDomInfo(id, callBack) {
				const query = uni.createSelectorQuery().in(this);
				query.select('#' + id)
					.boundingClientRect()
					.exec(res => {
						callBack(res[0]);
					});
			},
			resetListDom() {
				let _this = this;
				this.getDomInfo('areaBox0', info => {
					_this.areaBoxInfo = info;
					_this.easydragQues.forEach((item, idx) => {
						_this.getDomInfo('appLi' + idx, res => {
							item.x = res.left - info.left;
							item.y = res.top - info.top;
						});
					});
				});
			},
			touchStart(index, event) {
				this.touchItem = this.easydragQues[index].key;
				this.moviewShow = true;
				this.moveX = this.easydragQues[index].x;
				this.moveY = this.easydragQues[index].y;
				var x = event.changedTouches[0].clientX - this.areaBoxInfo.left;
				var y = event.changedTouches[0].clientY - this.areaBoxInfo.top;
				this.inBoxXY = {
					x: x - this.easydragQues[index].x,
					y: y - this.easydragQues[index].y,
				}
			},
			touchMove(event) {
				let areaBoxTop = this.areaBoxInfo.top;
				let areaBoxLeft = this.areaBoxInfo.left;
				var x = event.changedTouches[0].clientX - areaBoxLeft;
				var y = event.changedTouches[0].clientY - areaBoxTop;
				this.moveX = x - this.inBoxXY.x;
				this.moveY = y - this.inBoxXY.y;
			},
			touchEnd(item,index) {
				var that = this;
				const query = uni.createSelectorQuery().in(that);
				query.select('.easydragAnswer').boundingClientRect(data => {
					let X = this.moveX - data.left;
					let Y = Math.abs(this.moveY - data.top);
					if (Y < 165 && Y > 100 && X < 510 && X > -120) {
						this.isStartover = true
						let easydragQuesList = [];
						this.easydragQues.map((itm,inx)=>{
							if(index == inx){
								this.easydragQues.splice(index,0)
								
							}else{
								easydragQuesList.push(itm)
							}
						})
						this.easydragQues = easydragQuesList;
						this.easydragAnswer.push(item);
						this.resetListDom();
						if(this.easydragQues.length == 0){
							this.isMove = true;
							this.resultList = this.easydragAnswer
						}
						
					} else {
						return
					}
				}).exec();
				this.moviewShow = false;
			},
			reorderStartover(){
				this.easydragAnswer = [];
				this.easydragQues = this.oldEasydragQues;
				this.resetListDom();
				this.submitIf = false;
				this.isMove =false
			},
			reorderSubmit() {
				this.submitIf = true;
				this.isStartover = false;
				this.questions.serialIf = true;
				this.degreeIf = true;
				let easydragAnswerList = [];
				let easydragAnswerValue = []
				this.easydragAnswer.map((item,index)=>{
					easydragAnswerValue.push(item.key)
					if(item.answer == index + 1){
						item.isCorrectIf = true;
						easydragAnswerList.push(item.key)
					}else{
						item.isCorrectIf = false
					}
				})
				if(easydragAnswerList.length == this.easydragAnswer.length){
					this.questions.isElectIf = true;
				}else{
					this.questions.isElectIf = false;
				}
			},