鼠标点击移动元素（可关闭打开）

最新推荐文章于 2023-09-18 17:21:27 发布

原创最新推荐文章于 2023-09-18 17:21:27 发布 · 304 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #javascript #html #html5

前端专栏收录该内容

6 篇文章

订阅专栏

本文详细解析了如何使用JavaScript监听鼠标事件，包括mousedown、mousemove和mouseup，实现网页中元素的拖动功能。通过实例代码展示了如何获取鼠标位置，并结合元素的offsetLeft和offsetTop属性，实现实时更新元素位置的效果。

首先得了解

**event**里有些什么

screenX:鼠标位置相对于用户屏幕水平偏移量，而screenY也就是垂直方向的，此时的参照点也就是原点是屏幕的左上角。

clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角

pageX：参照点也是浏览器内容区域的左上角

通过两个鼠标点击事件

onmousedown	//点击事件
onmousemove	//移动事件
onmouseup	//鼠标抬起事件

话不多说直接上代码

var btn = document.getElementById("btn");
			
			function btnn(){
				
				btn.nextElementSibling.classList.toggle("odiv")
				onc();
				
			}
			
			function onc(){
			var box = document.getElementsByClassName("odiv")[0];
			box.onmousedown=function(v){
				var event= event || v;
				if(event.button == 0)
				{
					var x=event.pageX||event.clientX;
					var y=event.pageY||event.clientY;
					var offx=box.offsetLeft;
					var offy=box.offsetTop;
					document.onmousemove = function(ev)
					{
						var event= event || ev;
						var pax=event.pageX || event.clientX;
						var pay=event.pageY || event.clientY;
						
						box.style.left=(pax-x)+offx+"px";
						box.style.top=(pay-y)+offy+"px";
						box.style.cursor="move";
					}
				}
				
			}
			document.onmouseup=function(){
				document.onmousemove = null;
			}
			}

前端代码如下：

<head>
<style>
.odiv{
			width: 100px;
			height: 100px;
			background: red;
			position: relative;	//此类型一定得加上
}
</style>
</head>
	<body>
		<button id="btn" onclick="btnn()">打开</button>
		<div id="ww" class=""></div>

																											大佬勿喷