拖拽div靠近另一个div，改变另一个div颜色_div内容拖拽到另一个div-优快云博客

本文链接：https://blog.youkuaiyun.com/Vue1024/article/details/122330413

本文介绍如何通过JavaScript实现两个div元素之间的交互，当一个div被拖拽靠近另一个div时，后者颜色会动态改变。通过鼠标事件监听和元素位置判断，实现视觉反馈效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

拖拽div靠近另一个div，改变另一个div颜色

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style type="text/css">
		.h1 {
			width: 100px;
			height: 100px;

			background: red;
			position: absolute;
			z-index: 999;
		}
		
		.h2{
			width: 100px;
			height: 100px;
			background: red;
			top: 200px;
			left: 200px;
			position: absolute;
		}
		body{
			margin: 0;
			padding: 0;
		}
	</style>

	<body>
		<div class="h1">

		</div>
		<div class="h2"></div>
	</body>
	<script type="text/javascript">
		var h1 = document.getElementsByClassName("h1")[0]
		var h2 = document.getElementsByClassName("h2")[0]

		h1.onmousedown = function(e) {
			var x = e.clientX - h1.offsetLeft
			var y = e.clientY - h1.offsetTop
			document.onmousemove = function(e) {
				h1.style.left = e.clientX - x + "px";
				h1.style.top = e.clientY - y + "px";
				
				if(h1.offsetLeft+h1.offsetWidth >= h2.offsetLeft &&  h1.offsetTop + h1.offsetHeight >= h2.offsetTop && h1.offsetLeft<=h2.offsetWidth + h2.offsetLeft && h1.offsetTop <= h2.offsetHeight + h2.offsetTop) {
					h2.style.background= colorwehe()
				}else{
					h2.style.background='red'	
					
				}
				
				/*console.log(h1.offsetLeft+h1.offsetWidth)*/
			}
		}
		document.onmouseup = function() {
			document.onmousemove = null;
		}
		//自定义颜色
		function colorwehe() {
			var  a = Math.floor(Math.random() *256);
			b = Math.floor(Math.random() * 256);
			c = Math.floor(Math.random() * 256)
			return "rgb(" + a + "," + b + "," + c +")"
		}
		
		
	</script>

</html>