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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。