touch事件完成h5拖拽元素到指定范围

最新推荐文章于 2023-10-11 17:07:57 发布

judy_1118

最新推荐文章于 2023-10-11 17:07:57 发布

阅读量1.2k

点赞数

分类专栏： h5 文章标签： javascript html5

本文链接：https://blog.csdn.net/judykang123/article/details/108779194

版权

h5 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

效果

在h5里，我们要拖拽一个元素（粉色块），使其中心点在指定范围（绿色块）内时返回√，如果没到指定范围就松手了，则位置返回到（0,0）
在这里插入图片描述

层级关系(html)

为了更好地去监测及获取数据，我们需要一个带定位的大盒子把他们包起来，一个停留的范围和一个带有中心点的拖拽元素

<!-- 一个带有定位的大盒子，为了确定位置 -->
<div id="biggest_box">
		<!-- 中心点停留的范围盒子 -->
		<div id="stay1"></div>
		<!-- 拖拽的物体 -->
		<div id="drag_item">
			<!-- 中心点，方便观测 -->
			<div id="center"></div>
		</div>
</div>

拖拽函数

在touchmove的时候要求被拖拽的元素随着拖拽移动，拖拽结束后获取被拖拽元素中心点位置，并检测是否在范围内

完整代码：

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8"/>
	<title>拖拽物体中心点在指定区域</title>
	<style type="text/css">
		* {
			padding: 0;
			margin: 0;
		}
		#biggest_box{
			width: 100%;
			height: 100%;
			position: fixed;
			left: 0;
			top: 0;
		}
		#drag_item {
			width: 100px;
			height: 100px;
			background-color: rgba(255,0,0,.3);
			position: absolute;
		}
		#center{
			width: 2px;
			height: 2px;
			border: 1px solid #000;
			background: #fff;
			position: absolute;
			left: 48px;
			top: 48px;
		}
		#stay1{
			width: 200px;
			height: 200px;
			position: absolute;
			left: 400px;
			top: 700px;
			background-color: cadetblue;
		}
	</style>
	<script type="text/javascript">

		window.onload = function () {
			var drag_item = document.getElementById('drag_item');
			
			drag_item.addEventListener('touchmove', function (e) {
				//拖拽时小盒子跟着手指走
				drag_item.style.left = e.touches[0].clientX + 'px';
				drag_item.style.top = e.touches[0].clientY + 'px';
			});
			drag_item.addEventListener('touchend', function (e) {
				let finalX = parseFloat(e.srcElement.style.left)+parseFloat(drag_item.offsetWidth/2);//最终的中心点的x坐标
				let finalY = parseFloat(e.srcElement.style.top)+parseFloat(drag_item.offsetHeight/2);//最终的中心点的y坐标
				if( finalX >= 400 && finalX <=600 && finalY >=700 && finalY <= 900 ){//范围的left值,范围的left值+范围宽度,范围的top值,范围的top值+范围高度
					console.log("√");
				}else{
					console.log("中心点不在范围内，无效");
					drag_item.style.left = '0px';
					drag_item.style.top = '0px';
				}
				
			});
		 }
	</script>
</head>
<body>
	<!-- 一个带有定位的大盒子，为了确定位置 -->
	<div id="biggest_box">
		<!-- 中心点停留的范围盒子 -->
		<div id="stay1"></div>
		<!-- 拖拽的物体 -->
		<div id="drag_item">
			<!-- 中心点，方便观测 -->
			<div id="center"></div>
		</div>
	</div>
</body>
</html>

注意

此方法适用于h5，如果是pc端请用鼠标事件。

judy_1118

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
touch事件完成h5拖拽元素到指定范围

效果在h5里，我们要拖拽一个元素（粉色块），使其中心点在指定范围（绿色块）内时返回√，如果没到指定范围就松手了，则位置返回到（0,0）层级关系(html)为了更好地去监测及获取数据，我们需要一个带定位的大盒子把他们包起来，一个停留的范围和一个带有中心点的拖拽元素<div id="biggest_box">  <div id="stay1"></d
复制链接

扫一扫