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

作者：AllinToyou | 2024-03-20 15:51:59

踩

js onmousedown


<!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>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/274805