Javascript如何实现登录框拖拽效果

这篇文章主要介绍了Javascript如何实现登录框拖拽效果，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

具体内容如下

需求分析

1、点击弹出登录框

2、在登录框的特定区域可以将登录框拖拽至任意位置

3、可以关闭登录框，并且下一次点击弹出登录框归位

具体实现

完整代码

                        
登录弹出登录框
    
        
登录            x        
        
                
                    账号：                                    
                
                    登录密码：                                    
                
登录
        
    
    

点击弹出登录框的实现方式

使用JavaScript的点击事件，当点击弹出时将登录框的display设置未block即可

out.addEventListener('click',function() {            login_box.style.display = 'block';        });

拖拽效果的实现

拖拽效果的实现分为三个步骤：

• 鼠标按下,获取鼠标在登陆框中的坐标

• 鼠标移动,获取登陆框移动的位置

• 松开鼠标,解除鼠标移动的事件
  

1.鼠标按下,获取鼠标在登陆框中的坐标

如何获得鼠标在登陆框中的位置呢? 在这里我们使用页面中鼠标的坐标减去登录框上左边距的方法.

由上图可得到,鼠标在登陆框内的坐标未:( x , y ) = ( p a g e X − o f f s e t L e f t , P a g e Y − o f f s e t T o p ) (x,y) = (pageX - offsetLeft, PageY - offsetTop)(x,y)=(pageX−offsetLeft,PageY−offsetTop)
当让在这里是没有考虑边框对offset的影响.

/* 按下鼠标的一瞬间计算出鼠标在title中的距离，并在下一次按下鼠标前保持不变 *//* 这里必须要用login_box的offset，因为在title之前已经有绝对定位的login_box了，它的offset都为0 */let mousex = e.pageX - login_box.offsetLeft;let mousey = e.pageY - login_box.offsetTop;

2.鼠标移动,获取登录框的位置

这时候鼠标在登录框的位置在鼠标松开之前是不会在变化的,我们可以利用这个特性来得到当前登录框的位置。那就是鼠标在页面中的坐标减去鼠标在页面中的坐标即可。这里就不再做过多的解释了。

/* 这里为什么用的是doucument而不用title原因是鼠标可能移动过快超出了title的范围，还有就是防止title盒子被遮挡，鼠标不在title上面从前无法触发移动和取消事假，从而不能失效 */            function movee(e) {                login_box.style.left = e.pageX - mousex + 'px';                login_box.style.top = e.pageY - mousey + 'px' ;                            }            document.addEventListener('mousemove',movee)

3.松开鼠标,解除鼠标移动的事件

document.addEventListener('mouseup',function () {                document.removeEventListener('mousemove',movee)            })

关闭登录框，位置归位

将其display设置为none即可，具体看代码。

close.addEventListener('click',function () {            login_box.style.left = 50 + '%';            login_box.style.top = 50 + '%' ;            login_box.style.display = 'none';        });

效果展示

代码实现时遇到的困难

1、使用margin居中时必须要有width，好久没写代码了都有点忘记了。
2、因为给登录框设置了margin导致移动错位，这是因为我的坐标计算公式是没有考虑margin的（只考虑了定位的left和right），导致登录框到达了坐标位置又因为magin又调整了位置。解决的方法应该时在计算移动的坐标时减去margin即可。
3、offset是相对了有定位的父级节点来说的，要牢记。
4、为什么鼠标移动时是对document绑定的事件？

为了放置鼠标移动过快时间无法正确处理所以事件绑定到document上。若这个登录框没有加绝对定位，那么在移动的过程中可能会被其他的元素遮挡，所以移动事件不能绑定在登录框上，而是绑定在document上。

感谢你能够认真阅读完这篇文章，希望小编分享的"Javascript如何实现登录框拖拽效果"这篇文章对大家有帮助，同时也希望大家多多支持，关注行业资讯频道，更多相关知识等着你来学习!