原生js实现弹出层登录拖拽功能
在WEB开发过程中，总会遇到一些从未接触过的需求，总是想尽一切办法去研究，最终实现效果，在实现效果的那一刻成就感爆棚，有木有？
留言墙、弹出框等一些常见地方都有拖拽功能，方便用户体验嘛。
实现拖拽功能，三个事件mousemove,mouseup,mousedown,偏移量(offsetLeft,offsetTop,offsetWidth,offsetHeight)，窗口坐标位置(clientX,clientY)以及获取可视区域方法的兼容性处理。
之前做的比较多的留言墙效果时写过的，这当时做的笔记，现在来整理整理。
JavaScript代码：
window.onload=function(){
varbtn=document.getElementsByClassName('login')[0]
varclose=document.getElementById('close');
varlogin=document.getElementById('login');
vartop=(document.documentElement.clientHeight-250)/2;//top值等于(获取页面可视区域的宽度-登录框的高度)/2
varleft=(document.documentElement.clientWidth-350)/2;
varopen=document.getElementById('screen');
btn.onclick=function(){
login.style.display='block';
login.style.left=left+'px';
login.style.top=top+'px';
open.style.display='block';
open.style.width=getInner().width+'px';//弹出层的宽度等于可视窗口的宽度
open.style.height=getInner().height+'px';
}
close.onclick=function(){
login.style.display='none';
open.style.display='none';
}
window.onresize=function(){
vartop=(getInner().height-250)/2;
varleft=(getInner().width-350)/2;
login.style.left=left+'px';
login.style.top=top+'px';
}
//跨浏览器获取可视窗口
functiongetInner(){
if(window.innerWidth!='undefined'){//IE不支持返回undefind
return{
width:window.innerWidth,
height:window.innerHeight
}
}else{
return{
width:document.documentElement.clientWidth,
height:document.documentElement.clientHeight
}
}
}
//实现拖拽功能，三个事件mousemove,mouseup,mousedown
//clientX,clientY时鼠标指针相对于整个屏幕的坐标距离
//offsetLeft,offsetTop获取当前元素相对于父元素的位置,在这里，父元素是document
login.onmousedown=function(e){
stop(e);//阻止事件默认行为
vare=e||window.event;
varoLeft=e.clientX-login.offsetLeft;//login.offsetLeft获取盒子边框到浏览器左边框的距离
varotop=e.clientY-login.offsetTop;
document.onmousemove=function(e){//移动的是整体的doucment
vare=e||window.event;
//不能移出可视区域
varleft=e.clientX-oLeft;
vartop=e.clientY-otop;
//左右
if(left<0){//如果盒子距左边的距离小于零，即超出
left=0;
}elseif(left>getInner().width-login.offsetWidth){//可视区域的长度，减去盒子的长度offsetWidth
left=getInner().width-login.offsetWidth;
}
//上下
if(top<0){
top=0;
}elseif(top>getInner().height-login.offsetHeight){
top=getInner().height-login.offsetHeight;
}
login.style.left=left+'px';
login.style.top=top+'px';
}
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
}
}
//取消默认行为
functionstop(e){
vare=e||window.event;
if(typeofe.preventDefault!='undefined'){
e.preventDefault();//W3C
}else{
e.returnValue=false;//IE阻止事件默认行为
}
}
}
HTML代码：
<divid="header"> <divclass="logo"><imgsrc="images/logo.gif"alt=""/></div> <divclass="member">个人中心 <ulclass="list"> <li><ahref="###">设置</a></li> <li><ahref="###">换肤</a></li> <li><ahref="###">帮助</a></li> <li><ahref="###">退出</a></li> </ul> </div> <divclass="login">登录</div> </div> <divid="login"> <h2><imgsrc="images/close.png"alt=""class="close"id="close"/>登录</h2> <divclass="user">用户名<inputtype="text"name="user"class="text"/></div> <divclass="pass">密 码 <inputtype="password"name="pass"class="text"/></div> <divclass="button"> <inputtype="button"class="submit"value=""/></div> <divclass="other">注册新用户|忘记密码</div> </div> <divid="screen"></div> <scripttype="text/javascript"src="demo.js"></script>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。