In diesem Artikel gelöste Probleme:
So implementieren Sie die Drag-Funktion in der Webseite
2. Der Unterschied zwischen document.documentElement und document.body.
document.documentElement.clientWidth bezieht sich auf die Breite des gesamten HTML-Dokuments, die Breite von document.body.clientWidth. Die beiden sind nicht dasselbe. Sie können es über console.log(document.documentElement) und console.log(document.body) in der Konsole testen.
3. Der Unterschied zwischen getBoundingClientRect().left und offsetLeft.
getBoundingClientRect() wird verwendet, um den linken, oberen, rechten und unteren Rand des Elements abzurufen. offset ermittelt die linke und obere Position relativ zum übergeordneten Element. getBoundingClientRect() ruft die linke, obere, rechte und untere Position relativ zum Fenster ab.
4. e.clientX bezieht sich auf die Koordinaten des Mauspunkts relativ zum Fenster.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹窗</title>
<style type="text/css">
#mask {
position: fixed;
left:0;
top:0;
width:100%;
height: 100%;
background-color: hsla(250,100%,50%,0.6);
display: none;
}
#popBox {
position: absolute;
background-color: #fff;
width:200px;
height: 200px;
/*left:50%;
top:50%;*/
/*margin-top: -100px;
margin-left: -100px;*/
}
</style>
</head>
<body>
<button id="clickBtn">点击</button>
<div id="mask">
<div id="popBox"></div>
</div>
<script type="text/javascript">
var clickBtn = document.getElementById("clickBtn");
var popBox = document.getElementById("popBox")
var mask = document.getElementById("mask");
clickBtn.onclick = function() {
mask.style.display = "block";
popBox.style.left = (document.documentElement.clientWidth - popBox.offsetWidth)/2 + "px";
popBox.style.top = (document.documentElement.clientHeight - popBox.offsetHeight)/2 + "px";
}
popBox.onclick = function(e) {
var e = e || window.event;//e指所有代码的集合，通过它可以获取事件的各种属性。
e.cancelBubble = true;//阻止事件冒泡，即点击事件不会传递到mask这一层，意味着不会触发点击mask事件代码。
}
mask.onclick = function() {
mask.style.display = "none";
}
//拖拽 mousedown->mousemove->mouseup
popBox.onmousedown = function(e) {
var e = e || window.event;
var pos = popBox.getBoundingClientRect();//getBoundingClientRect()用于获取元素的left、top、right、bottom。offset获取相对于父级的left和top。getBoundingClientRect()获取相对于窗口的left、top、right、bottom。
var oX = e.clientX - pos.left;//clientX指相对于窗口的坐标。
var oY = e.clientY - pos.top;
document.onmousemove = function(e) {
var e = e || window.event;
var oLeft = e.clientX - oX;
var oTop = e.clientY - oY;
popBox.style.left = oLeft + "px";
popBox.style.top = oTop + "px";
if (oLeft<0) {
popBox.style.left = 0 + "px";
};
if (oLeft>document.documentElement.clientWidth - popBox.offsetWidth) {
popBox.style.left = document.documentElement.clientWidth - popBox.offsetWidth + "px";//document.documentElement.clientWidth指整个html文档的宽度，document.body.clientWidth的宽度。这两者是不一样的。可以在console控制台通过console.log(document.documentElement)和console.log(document.body)进行测试。
}
if (oTop<0) {
popBox.style.top = 0 + "px";
};
if (oTop > document.documentElement.clientHeight - popBox.offsetHeight) {
popBox.style.top = document.documentElement.clientHeight - popBox.offsetHeight + "px";
}
}
popBox.onmouseup = function() {
document.onmousemove = null;
}
}
</script>
</body>
</html>
