Heim > Artikel > Web-Frontend > Verwenden Sie js, um eine elegante Drag-and-Drop-Funktion zu implementieren
Verwenden Sie js, um eine elegante Drag-and-Drop-Funktion zu implementieren
- 韦小宝Original
- 2018-03-09 15:57:351197Durchsuche
Auf einigen Websites können wir sehr modisches und cooles Bildziehen sehen. Natürlich können diese Vorgänge mit JavaScript erreicht werden, deshalb werden wir heute darüber sprechen, wie man JavaScriptverwendet Diejenigen, die die Drag-and-Drop-Funktion implementiert haben, noch nichts über die Drag-and-Drop-Funktion mit JavaScript gelernt haben oder interessiert sind, schauen wir uns das gemeinsam an!
Zu beachtende Fragen:
1. So implementieren Sie die Drag-Funktion auf 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.
(1) getBoundingClientRect() wird verwendet, um die linke, obere, rechte und untere Seite des Elements abzurufen.
(2) 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>
<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>
<p id="mask">
<p id="popBox"></p>
</p>
<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>In Kombination mit der Codeanalyse habe ich das Gefühl, dass ich dem Quellcode meine eigenen Versuche gegeben habe, ihn zu löschen und zu ändern. Diese Art des Lernens schreitet sehr schnell voran und ist nicht leicht zu vergessen.
Verwandte Empfehlungen:
JS-Steuerdatei per Drag-and-Drop steuern und Drag-Inhalte abrufen
Das obige ist der detaillierte Inhalt vonVerwenden Sie js, um eine elegante Drag-and-Drop-Funktion zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!