拖拽图片进行拼图JS+DOM（面试被问过的前端问题）

最新推荐文章于 2025-04-09 15:58:54 发布

前端学习小分队

最新推荐文章于 2025-04-09 15:58:54 发布

阅读量271

点赞数

文章标签： css html css3

本文链接：https://blog.youkuaiyun.com/weixin_45215652/article/details/121453762

版权

本文介绍了一种使用纯JavaScript实现HTML元素拖拽的方法。通过监听onmousedown、onmousemove及onmouseup事件，使得指定的HTML元素能够随着鼠标的移动而移动，并在鼠标释放时固定位置。

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

步骤：
1.当鼠标在被拖拽元素上按下时，开始拖拽onmousedown
2.鼠标移动时被拖拽元素跟随鼠标移动onmousemove
3.鼠标松开时，被拖拽元素固定当前位置onmouseup

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;
				position: absolute;
			}
			#box2{
				width: 100px;
				height: 100px;
				background-color: yellow;
				position: absolute;
				left:200px;
				top:200px;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				var box1 = document.getElementById("box1");
				// box1绑定鼠标按下事件
				// 当鼠标在被拖拽元素上按下时，开始拖拽onmousedown
				box1.onmousedown = function(event){
					event = event||window.event;
					var ol = event.clientX-box1.offsetLeft;
					var ot = event.clientY-box1.offsetTop;
					
				// 为document绑定onmousemove事件
					document.onmousemove = function(event){
					event = event || window.event;
					// 鼠标移动时被拖拽元素跟随鼠标移动onmousemove
					// 获取鼠标坐标
					var left = event.clientX - ol;
					var top = event.clientY - ot;
					// 修改box1位置
					box1.style.left = left+"px";
					box1.style.top = top+"px";
					};
					// 为document绑定一个鼠标松开事件
					document.onmouseup = function(){
						// 鼠标松开时，被拖拽元素固定当前位置onmouseup
						// 取消document中onmousemove事件
						document.onmousemove = null;
						document.onmouseup = null;
					};
				};
			};
		</script>
	</head>
	<body>
		<div id="box1"></div>
		<div id="box2"></div>
	</body>
</html>