两个拖拽检测相互碰撞之后变色

最新推荐文章于 2022-08-16 12:21:59 发布

小涛涛啊！

最新推荐文章于 2022-08-16 12:21:59 发布

阅读量210

点赞数

分类专栏： js效果文章标签： js

本文链接：https://blog.csdn.net/t5555666/article/details/108739739

版权

js效果专栏收录该内容

7 篇文章 0 订阅

订阅专栏

两个拖拽检测相互碰撞之后变色

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#box{
				width: 100px;
				height: 100px;
				background: red;
				position: absolute;
				top:300px;
				left:200px;
			}
			#box1{
				width: 100px;
				height: 100px;
				background: yellow;
				position: absolute;
				top:0;
				left:0;
			}
		</style>
	</head>
	<body>
		<div id="box"></div>
		<div id="box1"></div>
	</body>
	<script type="text/javascript">
	//当黄色的左边到可视窗口的距离小于红色右边到可视窗口的距离，那么就会发生碰撞，否则不会
	var obox=document.getElementById('box');
	var obox1=document.getElementById('box1');
	console.log('我是红色'+(obox.offsetLeft+obox.offsetWidth))
	function move(obj){
		obj.onmousedown=function(evt){
			var e=evt||window.event;
			var x=e.offsetX;
			var y=e.offsetY;
			document.onmousemove=function(evt){
				var e=evt||window.event;
				var obox1_l=e.clientX-x;//是黄色块左边到可视窗口的距离
				var obox1_t=e.clientY-y;//是黄色块上边边到可视窗口的距离
				var obox1_r=obox1_l+obox1.offsetWidth;//是黄色块右边到可视窗口的距离
				var obox1_b=obox1_t+obox1.offsetHeight;//是黄色块底边边到可视窗口的距离
				
				var obox_l=obox.offsetLeft
				var obox_r=obox.offsetLeft+obox.offsetWidth
				var obox_t=obox.offsetTop;
				var obox_b=obox.offsetHeight+obox.offsetTop
				if(obox1_b<obox_t||obox1_t>obox_b||obox1_r<obox_l||obox1_l>obox_r){
					obox.style.background='red'
				}else{
					obox.style.background='green'
				}
				
				obj.style.left=obox1_l+'px';
				obj.style.top=obox1_t+'px';
			}
		}
		obj.onmouseup=function(){
			document.onmousemove=null;
		}
	}
	move(obox1)
	
	</script>
</html>