拖拽

pages/index/index.vue

@@ -33,6 +33,10 @@
 	const startX = ref(0)
 	const startY = ref(0)
 	const isDragging = ref(false)
+	const tempX = ref()
+	const tempY = ref()
+	const tempFlag = ref(true)
+	
 	const imgUrl = ref('https://assets.sx25.troyrc.com/sx25/images/events/XBDT.jpg'); // 修改为ref
 	const blocks = ref(
 		[
@@ -1942,27 +1946,14 @@
 
 	// 触摸开始
 	const handleTouchStart = (e) => {
+		tempFlag.value = true
 		console.log('handleTouchStart')
 		// 获取触摸点的坐标
-		const x = e.touches[0].x;
-		const y = e.touches[0].y;
+		tempX.value = e.touches[0].x;
+		tempY.value = e.touches[0].y;
+	
 		// 判断点击位置
-		blocks.value.forEach((block) => {
-			if (isPointInQuadrilateral(x, y, block.polygon)) {
-				uni.showModal({
-					title: '提示',
-					content: block.hint,
-					showCancel: true, // 显示取消按钮
-					success: (res) => {
-						if (res.confirm) {
-							console.log('用户点击了“确定”按钮');
-						} else if (res.cancel) {
-							console.log('用户点击了“取消”按钮');
-						}
-					},
-				});
-			}
-		});
+		
 		if (e.touches.length === 1) {
 			// 单指拖动
 			startX.value = e.touches[0].clientX - offsetX.value
@@ -1981,6 +1972,7 @@
 	// 触摸移动
 	const handleTouchMove = (e) => {
 		console.log('11111');
+		tempFlag.value = false
 		if (e.touches.length === 1 && isDragging.value) {
 			// 单指移动逻辑...
 			offsetX.value = e.touches[0].clientX - startX.value;
@@ -2007,6 +1999,25 @@
 		console.log('handleTouchEnd')
 		lastDistance.value = -1
 		isDragging.value = false
+		if(!tempFlag.value){
+			return
+		}
+		blocks.value.forEach((block) => {
+			if (isPointInQuadrilateral(tempX.value, tempY.value, block.polygon)) {
+				uni.showModal({
+					title: '提示',
+					content: block.hint,
+					showCancel: true, // 显示取消按钮
+					success: (res) => {
+						if (res.confirm) {
+							console.log('用户点击了“确定”按钮');
+						} else if (res.cancel) {
+							console.log('用户点击了“取消”按钮');
+						}
+					},
+				});
+			}
+		});
 	}
 
 	// 按钮点击事件处理函数