Javascript实现登录框拖拽效果

2024-09-29 18:34:17

本文实例为大家分享了Javascript实现登录框拖拽效果的具体代码，供大家参考，具体内容如下

需求分析

1、点击弹出登录框

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

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

具体实现

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        a {
            text-decoration: none;
            color: black;
        }
        .login-header {
           /*  margin: 0 auto; */ /* 必须设置width才能起作用 */
            height: 30px;
            line-height: 30px;
            font-size: 24px;
            text-align: center;
        }
        .login {
            width: 500px;
            height: 300px;
            position: absolute;
            border: #725252 solid 1px;
           /*  transform: translate(-50%,-50%); */
            left: 50%;
            top: 50%;
            /* 这里不能有margin，因为我们只改变了left和right 的只，当移动过后 margin还会再次生效导致失败 */
           /*  margin-left: -250px;
            margin-top: 50px; */
            background-color: seashell;
            transform: translate(-50%, -50%);
            z-index: 9999;
            box-shadow: 0 0 30px black;
            display: none;

        }
        .login-title {
            position: relative;
            margin: 20px 0 0 0;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 20px;
            cursor: move;
        }
        .close-btn {
            position: absolute;
            width: 30px;
            height: 30px;
            right: -15px;
            top: -35px;
            border-radius: 50%;
            background-color: #ffffff;
            line-height: 30px;
        }
        .login-content{
            margin: 15px auto;
            width: 450px;
            height: 230px;
        }
        .login-input label{
            margin-top: 20px;
            margin-left: 30px;
            width: 100px;
            text-align: right;
            height: 30px;
            line-height: 30px;
            display: inline-block;
        }
        .login-input input {
            height: 30px;
            width: 230px;
            border-radius: 10px;
            border: 1px solid rgba(0, 0, 0, .5);
        }
        .login-btn {
            width: 100px;
            height: 50px;
            margin: 30px auto;
            border: 1px solid black;
            border-radius: 7px;
            line-height: 50px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="login-header"><a href="javascript:;" >登录弹出登录框</a></div>
    <div class="login">
        <div class="login-title">登录
            <span><a href="javascript:;" class="close-btn">x</a></span>
        </div>
        <div class="login-content">
                <div class="login-input">
                    <label for="name">账号：</label>
                    <input type="text" id="name">
                </div>
                <div class="login-input">
                    <label for="pwd">登录密码：</label>
                    <input type="password" id="pwd">
                </div>
                <div class="login-btn">登录</div>
        </div>
    </div>
    <script>
        let out = document.querySelector('.login-header');
        let login_box = document.querySelector('.login');
        let title = document.querySelector('.login-title');
        let close = document.querySelector('.close-btn');
        let move = document.querySelector('.login-content');
        out.addEventListener('click',function() {
            login_box.style.display = 'block';
        });
        close.addEventListener('click',function () {
            login_box.style.left = 50 + '%';
                login_box.style.top = 50 + '%' ;
            login_box.style.display = 'none';
        });
        /* 只有title可以移动 */
        title.addEventListener('mousedown',function(e) {
            /* 按下鼠标的一瞬间计算出鼠标在title中的距离，并在下一次按下鼠标前保持不变 */
            /* 这里必须要用login_box的offset，因为在title之前已经有绝对定位的login_box了，它的offset都为0 */
            let mousex = e.pageX - login_box.offsetLeft;
            let mousey = e.pageY - login_box.offsetTop;
            console.log(mousex,mousey);
            /* 这里为什么用的是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)
            document.addEventListener('mouseup',function () {

                document.removeEventListener('mousemove',movee)
            })
        });

    </script>
</body>
</html>

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

使用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上。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

js实现弹出框的拖拽效果实例代码详解

具体代码如下所示: //HTML部分 <div class="wrap"></div> <div class="popUpBox"> <div class="layer-head"><div class="layer-head-text">弹出框</div><div class="layer-close"></div&
百度Popup.js弹出框进化版拖拽小框架发布兼容IE6/7/8,Firefox,Chrome

我们之前发布过这样的代码,其实问题不大,但这里的版本主要是增加一些功能,回调执行服务器端的方法,对于asp.net开发或ajax开发都是非常有价值的改进.先看下效果图: 原有百度的Popup.js在有复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
javascript 网页编辑框及拖拽图片的问题

复制代码代码如下: function keyPress(ev){ if(ev.keyCode==13){ //在光标所在处创建一个区域. var range=document.selection.createRange(); //将区域的内容设置成为换行符. range.text="\n"; //将区域的起始点向右移动一个字符的长度. range.moveStart("character", 1); //将光标移动到区域的结尾.(若为false则是移动到起始位置)
js实现百度登录框鼠标拖拽效果

以百度的登录窗口为例,学习鼠标拖拽效果如何实现,拖拽范围限定以及登录窗口自动居中.学会如何制作弹出窗口特效,了解把元素设置为可拖拽的原理. 知识点: 1.掌握对可拖拽对话框的实现原理 2.了解元素如何触发脚本方法以及如何编写侦听事件 3. 学会设置元素在页面中居中和全屏注意区别: 1.screenX:鼠标位置相对于用户屏幕水平偏移量,而screenY也就是垂直方向的,此时的参照点也就是原点是屏幕的左上角. 2.clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角,该参照
js实现登录框鼠标拖拽效果

效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录框鼠标拖拽效果</title> <style type="text/css"> body { background: url("https://timgsa.baidu.com/timg?i
jQuery实现鼠标拖拽登录框移动效果

本文实例为大家分享了jQuery鼠标拖拽登录框移动的具体代码,供大家参考,具体内容如下 1.jQuery代码 <script src="js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function () { // 点击登录跳转 $(
Javascript实现登录框拖拽效果

本文实例为大家分享了Javascript实现登录框拖拽效果的具体代码,供大家参考,具体内容如下需求分析 1.点击弹出登录框 2.在登录框的特定区域可以将登录框拖拽至任意位置 3.可以关闭登录框,并且下一次点击弹出登录框归位具体实现完整代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="
JavaScript实现模态框拖拽效果

在这里做一个模态框拖曳的案例,在这里要实现的功能有: 1.点击弹出层, 会弹出模态框, 并且显示灰色半透明的遮挡层. 2.点击关闭按钮,可以关闭模态框,并且同时关闭灰色半透明遮挡层. 3.鼠标放到模态框最上面一行,可以按住鼠标拖拽模态框在页面中移动. 4.鼠标松开,可以停止拖动模态框移动. 实现思路为: 点击弹出层, 模态框和遮挡层就会显示出来display:block; 点击关闭按钮,模态框和遮挡层就会隐藏起来 display:none; 在页面中拖拽的原理: 鼠标按下并且移动, 之后松开鼠标
javascript实现登录框拖拽

本文实例为大家分享了javascript实现登录框拖拽的具体代码,供大家参考,具体内容如下效果: 代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .login-header { widt
JavaScript实现简单的拖拽效果

本文实例为大家分享了JavaScript实现简单的拖拽效果的具体代码,供大家参考,具体内容如下 1.先搭架子: * { margin: 0; padding: 0; } p { background: skyblue; text-align: center; } html, body { width: 100%; height: 100%; } .mask { width: 100%; height: 100%; position: fixed; left: 0; top: 0; backgro
JavaScript实现的简单拖拽效果

本文实例讲述了JavaScript实现的简单拖拽效果.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
js实现百度登录窗口拖拽效果

前言在我们使用百度相关的功能网页的时候,我们要去登录账号.但是小伙伴们有没有关注过百度的登录窗口的拖拽效果呢?下面分享仿百度登录拖拽效果的源码代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box{ width: 200px; heig
js实现模态框的拖拽效果

本文实例为大家分享了js实现模态框拖拽效果的具体代码,供大家参考,具体内容如下之前学习js遇到了这样的需求:鼠标按下后,移动鼠标,模态框随鼠标移动,鼠标松开,模态框也不会随鼠标移动.<完整的代码在最后哦> 分析思路: 1.点击弹出层,模态框和遮挡层就会显示出来.display:block2.点击关闭按钮,模态框和遮挡层就会隐藏.display:none 3.在页面中拖拽的步骤:鼠标按下并移动,之后松开鼠标4.触发事件是鼠标按下mousedown,鼠标移动是mousemove,鼠标松开:mou
JavaScript实现div的鼠标拖拽效果

本文实例为大家分享了JavaScript实现div鼠标拖拽效果的具体代码,供大家参考,具体内容如下实现原理鼠标按下时根据onmousemove事件来动态获取鼠标坐标位置以此来更新div的位置,实现的前提时div要有一个定位效果,不然的话是移动不了它的. HTML <div class="box"></div> CSS样式 .box { position: absolute; width: 200px; height: 200px; background: re

Javascript实现登录框拖拽效果

需求分析

具体实现

效果展示

相关推荐

随机推荐