调整页面

components/zhuapaiConfirm/zhuapai.vue

@@ -1,6 +1,5 @@
 <template>
-	<view id="Drop" :style="style" @touchmove="touchmove($event)" @touchstart="touchstart($event)"
-		class="dropContainer">
+	<view id="Drop" ref="DropRef" :style="style" @touchmove="touchmove($event)" @touchstart="touchstart($event)">
 		<view class="phone-camera-box-zhuapai" style="overflow: hidden;height: 150rpx;">
 			<video ref="videoRef" :class="myClass" style="width:100%; height: 150rpx;position: absolute;"
 				id="videoZhaPai" :controls="false"></video>
@@ -13,12 +12,11 @@
 			<img :src="imgUrl" alt="" ref="gudingImg" v-show="false">
 			<!-- #endif -->
 			<!-- 测试抓拍使用 -->
-			<!-- <button @click="handleZhua">抓拍</button> -->
+			<button @click="handleZhua">抓拍</button>
 		</view>
 		<span v-show="showVideo" @click="noShowVideoBtn" class="shiti-video-hidden-btn">开<i></i></span>
 		<span v-show="!showVideo" @click="showVideoBtn" class="shiti-video-show-btn">关<i></i></span>
 	</view>
-
 </template>
 
 <script setup>
@@ -41,7 +39,11 @@
 	let zhuapaiFun = null;
 	let stopCamera = null;
 
+	const DropRef = ref(null);
+	const DropContainerRef = ref(null);
 	const zhuapai = ref(0); // 单位分
+	const disX = ref(0); // 移动x
+	const disY = ref(0); // 移动y
 	const showVideo = ref(true);
 	const style = ref({
 		top: "10vh",
@@ -66,11 +68,44 @@
 	}
 
 	function touchmove(event) {
-		console.log(4444, event)
+		// 2，获取手指移动的实时位置  需要减去位置差
+		let moveX = event.touches[0].pageX - disX.value;
+		let moveY = event.touches[0].pageY - disY.value;
+		
+		const systemInfo = uni.getSystemInfoSync();  
+		const windowHeight = systemInfo.windowHeight;  // 可视区域高度 ‌:ml-citation{ref="1,3" data="citationList"}  
+		const windowWidth = systemInfo.windowWidth;  // 可视区域高度 ‌:ml-citation{ref="1,3" data="citationList"}  
+
+
+		// 3，获取容器的宽高和拖动元素的宽高  每一次移动都会获取一次 ，建议放在外面进行获取
+		let dragHeight = DropRef.value.$el.offsetHeight;
+		let dragWidth = DropRef.value.$el.offsetWidth;
+
+		// 4，控制范围：在元素 被拖拽的过程中 判断 元素的定位值 是否到达边界 如果到了 就不能在走了
+		if (moveX <= 0) {
+			moveX = 0;
+		}
+		// 上边界
+		if (moveY <= 0) {
+			moveY = 0;
+		}
+		//下边界  容器高度 - 拖动元素高度
+		if (moveY >= windowHeight - dragHeight - 150) {
+			moveY = windowHeight - dragHeight - 150;
+		}
+		//右边界   容器宽度 - 拖动元素宽度
+		if (moveX >= windowWidth - dragWidth) {
+			moveX = 0;
+		}
+
+		// 5，开始移动
+		style.value.top = moveY + "px";
+
 	}
 
 	function touchstart(event) {
-		console.log(3333, event)
+		disX.value = event.touches[0].pageX - DropRef.value.$el.offsetLeft;
+		disY.value = event.touches[0].pageY - DropRef.value.$el.offsetTop;
 	}
 
 
@@ -135,6 +170,10 @@
 
 <style lang="scss" scoped>
 	.dropContainer {
+		height: 200rpx;
+	}
+
+	#Drop {
 		width: 30vw;
 		height: 150rpx;
 		margin: 0;
@@ -155,28 +194,29 @@
 		::v-deep .uni-canvas-canvas {
 			position: absolute;
 		}
-		
+
 		::v-deep .show-video {
 			z-index: 10;
 
-			.uni-video-video,.uni-canvas-canvas {
+			.uni-video-video,
+			.uni-canvas-canvas {
 				z-index: 10;
 			}
 		}
-		
-		::v-deep .uni-video-container {
-			
-		}
+
+		::v-deep .uni-video-container {}
 
 		::v-deep .hidden-video {
 			z-index: -10;
 
-			.uni-video-video,.uni-canvas-canvas,{
-				z-index: -10;
-			}
+			.uni-video-video,
+			.uni-canvas-canvas,
+			{
+			z-index: -10;
 		}
+	}
+
 
-	
 
 	}
 </style>