Maison > Article > interface Web > Utilisez js pour implémenter une fonction glisser-déposer élégante
Utilisez js pour implémenter une fonction glisser-déposer élégante
- 韦小宝original
- 2018-03-09 15:57:351197parcourir
Nous pouvons voir des images très à la mode et sympas glisser sur certains sites Web. Bien sûr, ces opérations peuvent être réalisées en utilisant JavaScript, nous allons donc aujourd'hui parler de comment utiliser JavaScriptPour. ceux qui n'ont pas découvert la fonction glisser-déposer à l'aide de JavaScript ou qui sont intéressés, jetons un coup d'œil ensemble !
Questions à examiner :
1. Comment implémenter la fonction glisser sur la page Web .
2. La différence entre document.documentElement et document.body.
document.documentElement.clientWidth fait référence à la largeur de l'ensemble du document html, la largeur de document.body.clientWidth. Les deux ne sont pas identiques. Vous pouvez le tester via console.log(document.documentElement) et console.log(document.body) dans la console.
3. La différence entre getBoundingClientRect().left et offsetLeft.
(1) getBoundingClientRect() est utilisé pour obtenir la gauche, le haut, la droite et le bas de l'élément.
(2) offset obtient la gauche et le haut par rapport au parent. getBoundingClientRect() obtient la gauche, le haut, la droite et le bas par rapport à la fenêtre.
4. e.clientX fait référence aux coordonnées du point de la souris par rapport à la fenêtre.
<!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>Combiné à l'analyse du code, j'ai l'impression d'avoir donné au code source mes propres tentatives pour le supprimer et le modifier. Ce type d'apprentissage progresse très rapidement et n'est pas facile à oublier.
Recommandations associées :
glisser-déposer du fichier de contrôle js et obtenir du contenu par glisser-déposer
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!