原生js实现可拖动的登录框效果

时间：2021-05-25

实现原理

1.onmousemove事件触发时不断更新鼠标的pageXY改变位置，

登陆框的偏移量=鼠标当前位置-鼠标到登录框边框的距离

2.onmousedown鼠标摁下时触发事件获取鼠标到登陆框的距离，再设置true允许拖拽

3.onmouseup 鼠标弹起设置false停止拖拽

4.登录框居中显示公式：(可视区域宽高-登录框宽高)/2

5.当浏览器窗口大小变化时触发事件window.onresize 再更新登陆框居中显示

代码中有详细的注释

完整代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://pat"){ cwidth=document.documentElement.clientWidth;cheight=document.documentElement.clientHeight; }else{ cwidth=document.body.clientWidth; cheight=document.body.clientHeight; } login.style.left=(cwidth-lwidth)/2+"px"; login.style.top=(cheight-lheight)/2+"px"; mask.style.height=cheight+"px"; } //获取拖拽容器 var title=document.getElementById("title"); var isDraging=false; var mouseOffsetX; var mouseOffsetY; //鼠标按下事件 title.onmousedown=function(e){ var e=e||window.event; //鼠标相对于登录框的位置 mouseOffsetX=e.pageX-login.offsetLeft; mouseOffsetY=e.pageY-login.offsetTop; //鼠标摁下时为true isDraging=true; } //鼠标移动事件 document.onmousemove=function(e){ var e=e||window.event; //鼠标移动时的坐标 var newMX=e.pageX; var newMY=e.pageY; //判断为true时可以拖拽 if(isDraging===true){ //登录框的偏移值=当前位置-鼠标到登录框的距离 var loginL=newMX-mouseOffsetX; var loginT=newMY-mouseOffsetY; //如果left top值超过边缘时就让他等于边缘 if(loginL<0){ loginL=0; }else if(loginL>(cwidth-lwidth)){ loginL=cwidth-lwidth; } if(loginT<0){ loginT=0; }else if(loginT>(cheight-lheight)){ loginT=cheight-lheight; } login.style.left=loginL+"px"; login.style.top=loginT+"px"; } } //鼠标弹起时设置为不可拖拽 document.onmouseup=function(){ isDraging=false; } //点击X关闭登录框和弹出层 var close=login.getElementsByClassName("close")[0]; close.onclick=function(){ document.body.removeChild(mask); document.body.removeChild(login); } } //点击登录弹出登录框和弹出层 window.onload=function(){ var btn=document.getElementById("btn"); btn.onclick=function(){ b(); } }</script> </body> </html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持！

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章