效果
在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端请用鼠标事件。