js 网页特效（四）图解登录框拖拽效果及原理 超级简单！！

目录

前言

一、拖拽效果及原理

解析部分

结构搭建

js代码部分

效果图

二、结束语

---

前言

       说到拖拽，肯定又要运用offsetLeft和offsetTop对象了，上次的动画便是运用定时器加offsetLef对象实现移动的~
那拖拽效果呢，往下看叭~

一、拖拽效果及原理

解析部分

在本案例中，我们想要的是，如果鼠标按住登录框的头部，就可以实现鼠标移动不断改变登录框的位置，也就是"拖拽效果"，所以关键就是要在鼠标按住移动的过程中不断获取到登录框相对于父级元素的左侧与上边的距离

之前的文章小糖讲过，offsetLeft对象就是返回元素相对于父元素左边框的距离，而offsetTop对象则是返回元素相对于父元素上边框的距离，那这个两个距离要怎么算？图解来啦！

 

 

 

步骤：
      1、先获取图中鼠标位置（pageX，pageY）、登录框位置（offsetLeft，offsetTop）

      2、两者相减求出鼠标距离登录框的位置（x，y）

      3、在鼠标移动过程，不断获取新鼠标位置（pageX，pageY）

      4、鼠标位置 - （x，y）=  不断变化的登录框位置

      5、结果不断赋值给登录框的left和top值

      6、鼠标弹起，关闭鼠标移动的事件侦听器

结构搭建

.login-forward {
            font-size: 20px;
            text-align: center;
            cursor: pointer;
        }
        .login-bg {
            display: none;
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0px;
            left: 0px;
            background:rgba(0,0,0,.3);
        }
        .login {
            display: none;
            width: 512px;
            height: 280px;
            position: fixed;
            border: #000 solid 1px;
            left: 50%;
            top: 50%;
            background-color: #fff;
            box-shadow: 0px 0px 20px #fff;
            z-index: 9999;
            transform: translate(-50%,-50%);  /*以左上角顶点为基准 向右平移和向上偏移*/
        }
        /*关闭按钮*/
        .close {
            width: 20px;
            height: 20px;
            border: 1px solid #000;
            text-align: center;
            font-size: 21px;
            line-height: 15px;
            border-radius: 50%;
            position: absolute;
            top: -12px;
            right: -11px;
            cursor: pointer;
            background-color: white;
        }
        .login-title {
            width: 100%;
            margin-top: 20px;
            text-align: center;
            height: 40px;
            line-height: 40px;
            font-size: 18px;
            position: relative;
            cursor: move;
            margin-bottom: 20px;
            
        }
        .login-input-contenet {
            width: 100%;
            text-align: center;
            
        }
        .login-input-contenet label {
            float: left;
            text-align: right;
            width: 90px;
            line-height: 37px;
            height: 35px;
            font-size: 14px;
        }
        /*输入框*/
        .one {
            float: left;
            line-height: 35px;
            height: 35px;
            width: 350px;
            border: #ebebeb 1px solid;
            text-indent: 5px;
            border: none;
            border-bottom: 1px solid pink;
            outline-color: white;
        }
        .two {
            float: left;
            line-height: 35px;
            height: 35px;
            width: 350px;
            border: #ebebeb 1px solid;
            text-indent: 5px;
            border: none;
            border-bottom: 1px solid pink;
            outline-color: white;
        }
        
        /*登录按钮*/
        button {
            width: 60%;
            text-align: center;
            font-size: 18px;
            height: 40px;
            line-height: 38px;
            margin-top: 40px;
            background-color: #fff;
            border-radius: 10px;
            background: transparent;
            border: 1px solid pink;
        }
        button:active {
            color:#fff;
            background-color: pink;
        }

<div class="login-forward">点击登录</div>
    <div class="login-bg"></div>
    <div class="login">
        <div class="close">x</div>
        <div class="login-title">会员登录</div>
        <div class="login-input-contenet">
            <label>用户名：</label>
            <input type="text" placeholder="请输入用户名" class="one">
            <br><label>登录密码：</label>
            <input type="password" placeholder="请输入密码" class="two">
        <button>登录</button></div>
    </div>

js代码部分

var loginfw = document.querySelector('.login-forward');
        var login = document.querySelector('.login');
        var loginbg = document.querySelector('.login-bg');
        var close = document.querySelector('.close');
        loginfw.addEventListener('click',function(){
            login.style.display = 'block';
            loginbg.style.display = 'block';
        })
        close.addEventListener('click',function(){
            login.style.display = 'none';
            loginbg.style.display = 'none';
        })
        //拖拽事件
        var title = document.querySelector('.login-title');
        title.addEventListener('mousedown',function(e){
            var x = e.pageX - login.offsetLeft;
            var y = e.pageY - login.offsetTop;
            document.addEventListener('mousemove',move);
            function move(e){
                login.style.left = e.pageX - x + 'px';
                login.style.top = e.pageY - y + 'px';
            }
            document.addEventListener('mouseup',function(){
                document.removeEventListener('mousemove',move)
            });
        })

效果图

 

 

二、结束语

希望本篇文章可以帮到求知若渴的众多同学吖~
若能帮到 也欢迎点赞、收藏、关注我，后续也会持续发布新文章，祝大家学有所成！
欢迎各位前端大佬留言讨论指教！ 小糖谢谢各位啦~❤  ❤  ❤  ❤