JS代码实现拖拽（拖拽三剑客）

最新推荐文章于 2025-06-28 11:33:33 发布

米兰小铁匠1990

最新推荐文章于 2025-06-28 11:33:33 发布

阅读量782

点赞数

CC 4.0 BY-SA版权

分类专栏：前端 JS 拖拽文章标签： JS代码实现拖拽

本文链接：https://blog.youkuaiyun.com/weixin_44427236/article/details/86977778

前端同时被 3 个专栏收录

7 篇文章

订阅专栏

3 篇文章

订阅专栏

拖拽

2 篇文章

订阅专栏

本文介绍了一种实现网页元素拖拽的三步法，通过onmousedown、onmousemove和onmouseup事件，使页面中的div元素能够响应鼠标操作，实现自由拖拽。代码示例详细展示了如何使用JavaScript和CSS来完成这一功能。

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

我们要实现对一个元素的拖拽，先假设在页面中有一个div，我们对div有一个简单的css样式，并且将div绝对定位。
在标题中提到了实现拖拽的“三剑客”，也就是实现拖拽的三个通用步骤，相信大家在学会这三个步骤之后都能够实现元素在页面上的拖拽功能。
下面直接上代码：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			#div1{width: 100px; height: 100px; background-color: red; position: absolute; left: 100px; top: 100px}
		</style>
		<script>
			window.onload = function(){
				var oDiv = document.getElementById("div1");

				var offsetX = 0;
				var offsetY = 0;
				//第一步：当对div进行鼠标点击事件的时候，记录下当前鼠标的位置
				oDiv.onmousedown = function(ev){
					var e = ev || window.event;
					offsetX = e.clientX - oDiv.offsetLeft;
					offsetY = e.clientY - oDiv.offsetTop;
					//第二步：当我们在document下对div进行拖动的时候，给div的left和right进行定位
					document.onmousemove = function(ev){
						var e = ev || window.event;

						oDiv.style.left = e.clientX - offsetX + 'px';
						oDiv.style.top = e.clientY - offsetY + 'px';
					}
				}
				//第三步：在document下当鼠标抬起的时候，取消鼠标跟随事件
				document.onmouseup = function(){
					document.onmousemove = null;
				}
			}
		</script>
	</head>
	<body>
		<div id = 'div1'></div>
	</body>
</html>