JS之鼠标事件拖动一个块移动

最新推荐文章于 2025-06-16 23:59:03 发布

原创最新推荐文章于 2025-06-16 23:59:03 发布 · 1.9k 阅读

7 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

44 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现鼠标拖拽DIV元素的方法。通过监听鼠标事件并计算鼠标位置与DIV元素之间的相对位置来更新元素的坐标，实现平滑移动效果。

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#wrap{
			width: 100px;
			height: 100px;
			background-color: green;
			position: absolute;
			left:100px;
			top:100px;
			z-index: 100;
		}
	</style>
</head>
<body>
	<div id="wrap"></div>
</body>
	<script>
		//鼠标拖拽移动
		//1.为div绑定鼠标事件
		//2.将鼠标坐标点与div定位位置进行关联
		wrap.onmousedown = function(e){
			var e = e || window.event;
			//获取按下的位置
			var h = e.clientY;
			var w = e.clientX;
			console.log(h,w);
			//获得是鼠标按下时相对于元素的位置
			var ex = w - wrap.offsetLeft;
			var ey = h - wrap.offsetTop;
			document.onmousemove = function(h){
				var h = h||window.event;
				var  h1 = h.clientY;
				var  w1 = h.clientX;
				console.log(h1,w1);
				wrap.style.left=(w1-ex)+"px"; 
				wrap.style.top=(h1-ey)+"px";
			
			}
		}

		wrap.onmouseup =function(){
			document.onmousemove = null;
		}

	</script>
</html>