原生js鼠标事件onmousedown、onmousemove、onmouseup实现窗口的拖拽

最新推荐文章于 2023-07-05 23:37:25 发布

每一天，每一步

最新推荐文章于 2023-07-05 23:37:25 发布

阅读量1.6k

点赞数 1

分类专栏： javaScript 文章标签： javascript html5 html

本文链接：https://blog.csdn.net/u010234868/article/details/119982085

版权

javaScript 专栏收录该内容

135 篇文章 12 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		body {
			margin: 0;
		}
		#nav {
			height: 30px;
			line-height: 30px;
			background-color: darkblue;
			padding-left: 20px;
		}
		#nav a {
			color: #fff;
			text-decoration: none;
		}
		#box {
			width: 400px;
			height: 300px;
			border: 1px solid #000;
			position: absolute;
			left: 40%;
			top: 35%;
		}
		#hd {
			background-color: darkblue;
			height: 30px;
			line-height: 30px;
			color: #fff;
			padding-left: 10px;
			cursor: move;
		}
		#hd span {
			cursor: pointer;
			float: right;
		}

	</style>
	<script src="js/common.js"></script>
</head>
<body>
	<div id="nav"><a href="javascript:void(0)">注册信息</a></div>
	<div id="box">
		<div id="hd">注册信息（可以拖拽）<span id="box_close">【关闭】</span></div>
		<div id="bd"></div>
	</div>

	<script>
		var box = document.getElementById('box');
		var hd = document.getElementById('hd');
		var positionX, positionY, offsetX, offsetY, mouseX, mouseY;
		hd.onmousedown = function (e) {
			e = e || window.event;
			// 鼠标在盒子中的位置 = 鼠标按下时在页面中的坐标 - 盒子在页面中的偏移
			mouseX = getPage(e).pageX - box.offsetLeft;
			mouseY = getPage(e).pageY - box.offsetTop;

			// 鼠标移动的时候，盒子在页面中的偏移 = 鼠标当前位置-鼠标在盒子中的位置
			box.onmousemove = function (e) {
				e = e || window.event;
				boxX = getPage(e).pageX - mouseX;
				boxY = getPage(e).pageY - mouseY;
				box.style.left = boxX + 'px';
				box.style.top = boxY + 'px';
			}
		}
		// 鼠标弹起，移除移动事件
		document.onmouseup = function () {
			box.onmousemove = null;
		}
		// 点击关闭按钮，盒子隐藏
		var box_close = document.getElementById('box_close');
		box_close.onclick = function () {
			box.style.display = 'none';
		}
		
	</script>
</body>
</html>

每一天，每一步

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
原生js鼠标事件onmousedown、onmousemove、onmouseup实现窗口的拖拽

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> body { margin: 0; } #nav { height: 30px; line-height: 30px; background-color: darkblue; paddin.
复制链接

扫一扫