拖动元素

在做做华为官网顶部部分时，有一个为遮罩层的隐藏和显示，并且可以实现拖动的效果

首先遮罩层的写法，显示是点击Select Region时显示，给它加id，然后加点击事件，显示即可，隐藏是点击黑色透明的地方隐藏，点击盒子时不给隐藏，所以在这里我选择的布局是把它们两个分开，分成两个div，不包含在一起

fjoiweh();
		but1.onclick = function(){
			box.style.display = "block";
			box1.style.display = "block";
		};
		box.onclick = function(){
			box.style.display = "none";
			box1.style.display = "none";
		};

下面就是实现拖动box1盒子

//实现鼠标实时拖动元素
	function fjoiweh(){
		var box1 = document.getElementById("box1");//需要拖动的元素
		box1.onmousedown = function(ev){ //鼠标按下时
			ev = ev || event;
			var divX = ev.clientX - box1.offsetLeft;	
			var divY = ev.clientY - box1.offsetTop;
			document.onmousemove = function(ev){ //鼠标移动时
				ev = ev || event;
				box1.style.left = ev.clientX - divX + "px";
				box1.style.top = ev.clientY - divY + "px";
				console.log(divX);
				console.log(divY);
				console.log(ev.clientX);
				console.log(ev.clientY);
				console.log(box1.style.left);
				console.log(box1.style.top);
			};
			document.onmouseup = function(){ //鼠标抬起时
				document.onmouseup=document.onmousemove=null;
			};
		};
	}

首先，要给盒子进行定位，获取到鼠标的位置，把鼠标位置的值赋给box1盒子的top与left值，可以直接赋值，但是我想要的效果是鼠标在box1盒子按下时再赋值，所以我用onmousedown按下时给box1赋值，onmouseup离开之后给它为空，但是这又有问题了
当鼠标按下时，无论你放在盒子的那个位置，它都会跳转到盒子的左上角
为了解决这个问题，我定义了divX和divY
box1.offsetLeft是获取到box1和父级元素左边的距离
box1.offsetTop是获取到box1和父级元素上边的距离
ev.clientX是获取到鼠标X轴的距离
ev.clientY是获取到鼠标Y轴的距离
这样divX和divY就是每次鼠标按下时自动跳到左上角的差值
给box1盒子赋值的时候去掉，就可以实现实时拖动
下面我在控制台输出了值
console.log(divX); 127 80
console.log(divY); 28 67
console.log(ev.clientX); 526 480
console.log(ev.clientY); 78 117
console.log(box1.style.left); 399px 400px
console.log(box1.style.top); 50px 50px
在代码上可以看到在一些地方我用document把box1替换掉了,原因是我作死的往最边上拖，最后只露出一点点的时间就不能拖动了，有的时候手速太快，导致鼠标松开后仍然在动

解决方法来自
作者：啦啦啦嘿
来源：CSDN
原文：https://blog.csdn.net/sh435367384/article/details/79741356