Js-判断容器是否碰撞

最新推荐文章于 2021-04-30 11:55:02 发布

keyuzhang

最新推荐文章于 2021-04-30 11:55:02 发布

阅读量342

点赞数

分类专栏： Javascript

本文链接：https://blog.csdn.net/keyuzhang/article/details/89354596

版权

Javascript 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<script type="text/javascript" src="../recourse/jQuery/jquery-2.2.3.min.js"></script>
	<style type="text/css">
	*{
		margin:0;
		padding:0;
	}
	body {
		position:relative;
		z-index:1000;
	}
	div {
		position:absolute;
		z-index:2000;
		width:100px;
		height:100px;
	}
	.drag {
		background-color:blue;
		top:0;
		left:0;
	}
	.hit {
		background-color:red;
		top:100px;
		left:200px;
	}
 
</style>
</head>
<body>
	<div class="drag"></div>
	<div class="hit"></div>
	<script type="text/javascript">
		(function() {
			let drag = $('.drag');
			let hit = $('.hit');
 
			drag.on('mousedown', function(e) {
				let disX = e.pageX - $(this).position().left;
				let disY = e.pageY - $(this).position().top;
 
				$(document).on('mousemove', function(e) {
					drag.css({
						'left': e.pageX - disX + 'px',
						'top': e.pageY - disY + 'px'
					});
 
					collisionJq(drag, hit);
				});
 
				$(document).on('mouseup', function() {
					$(this).off('mousemove mouseup');
				});
			});
 
    //碰撞检测
    function collisionJq(dragEl, hitEl) {
    	let dragOff = dragEl.offset();
    	let hitOff = hitEl.offset();
 
    	if (dragOff.left + dragEl.outerWidth() < hitOff.left ||
    		dragOff.top + dragEl.outerHeight() < hitOff.top ||
    		dragOff.left > hitOff.left + hitEl.outerWidth() ||
    		dragOff.top > hitOff.top + hitEl.outerHeight()) {
            //没碰到
        console.log('没碰到');
        return false;
    } else {
            //碰到了
            console.log('碰到了');
            return true;
        }
    };
})();
</script>
</body>
</html>

keyuzhang

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Js-判断容器是否碰撞

<!DOCTYPE html><html><head> <title></title> <meta charset="utf-8"> <script type="text/javascript" src="../recourse/jQuery/jquery-2.2.3.min.js"></scri...
复制链接

扫一扫