js拖拽功能实现代码解析
本文解决的问题：
1、怎样在网页中实现拖曳功能；
2、document.documentElement与document.body的区别。
document.documentElement.clientWidth指整个html文档的宽度，document.body.clientWidth的宽度。这两者是不一样的。可以在console控制台通过console.log(document.documentElement)和console.log(document.body)进行测试。
3、getBoundingClientRect().left与offsetLeft的区别。
getBoundingClientRect()用于获取元素的left、top、right、bottom。offset获取相对于父级的left和top。getBoundingClientRect()获取相对于窗口的left、top、right、bottom。
4、e.clientX指的是鼠标点相对于窗口的坐标。
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>弹窗</title>
<styletype="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>
<buttonid="clickBtn">点击</button>
<divid="mask">
<divid="popBox"></div>
</div>
<scripttype="text/javascript">
varclickBtn=document.getElementById("clickBtn");
varpopBox=document.getElementById("popBox")
varmask=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){
vare=e||window.event;//e指所有代码的集合，通过它可以获取事件的各种属性。
e.cancelBubble=true;//阻止事件冒泡，即点击事件不会传递到mask这一层，意味着不会触发点击mask事件代码。
}
mask.onclick=function(){
mask.style.display="none";
}
//拖拽mousedown->mousemove->mouseup
popBox.onmousedown=function(e){
vare=e||window.event;
varpos=popBox.getBoundingClientRect();//getBoundingClientRect()用于获取元素的left、top、right、bottom。offset获取相对于父级的left和top。getBoundingClientRect()获取相对于窗口的left、top、right、bottom。
varoX=e.clientX-pos.left;//clientX指相对于窗口的坐标。
varoY=e.clientY-pos.top;
document.onmousemove=function(e){
vare=e||window.event;
varoLeft=e.clientX-oX;
varoTop=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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。