js实现小窗口拖拽效果
本文实例为大家分享了js实现窗口拖拽的具体代码，供大家参考，具体内容如下
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title></title>
<styletype="text/css">
#box{
height:300px;
width:300px;
background-color:green;
position:absolute;
}
</style>
</head>
<body>
<divid="box">
</div>
</body>
<scripttype="text/javascript">
varbox=document.getElementById("box");
//鼠标按下的函数
box.onmousedown=function(ev){
varoEvent=ev||event;
//求出鼠标和box的位置差值
varx=oEvent.clientX-box.offsetLeft;
vary=oEvent.clientY-box.offsetTop;
//鼠标移动的函数
//把事件加在document上，解决因为鼠标移动太快时，
//鼠标超过box后就没有了拖拽的效果的问题
document.onmousemove=function(ev){
varoEvent=ev||event;
//保证拖拽框一直保持在浏览器窗口内部，不能被拖出的浏览器窗口的范围
varl=oEvent.clientX-x;
vart=oEvent.clientY-y;
if(l<0){
l=0;
}elseif(l>document.documentElement.clientWidth-box.offsetWidth){
l=document.documentElement.clientWidth-box.offsetWidth;
}
if(t<0){
t=0;
}elseif(t>document.documentElement.clientHeight-box.offsetHeight){
t=document.documentElement.clientHeight-box.offsetHeight;
}
box.style.left=l+"px";
box.style.top=t+"px";
}
//鼠标抬起的函数
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
}
//火狐浏览器在拖拽空div时会出现bug
//returnfalse阻止默认事件，解决火狐的bug
returnfalse;
}
</script>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。