js实现模态框拖拽

本文实例为大家分享了js实现模态框拖拽的具体代码，供大家参考，具体内容如下

效果展示和需求分析

效果展示

需求分析

  • 点击登录后登录表单和遮罩层显示，点击关闭按钮隐藏。
  • 输入密码时可以明文查看或者隐藏。
  • 在表单的头部按下鼠标后可以拖拽表单。
  • 鼠标弹起拖拽结束。

代码分析

HTML 代码

<body>
    <a href="javascript:;" class="login">登录我的账号</a>
    <form action="">
        <h4>账号登录</h4>
        <div class="login-items">
            <label for="uname">用户名：</label >
            <input type="text" placeholder="请输入用户名" id="uname">
            </div>
        <div class="login-items">
            <label for="psw">登录密码：</label>
            <input type="password" name="" id="psw" placeholder="请输入您的密码">
            <span class="close" id="eye-state"></span>
        </div>
        <a href="javascript:;" class="login-btn">登录账号</a >
        <a href="javascript:;" class="close-btn">关闭</a >
    </form>
    <div id="bg" class="login-bg"></div>
</body>
<script src="js/模态框.js"></script>

js 代码

var eyeState = document.querySelector('#eye-state');
var pswInput = document.querySelector('#psw');
var login = document.querySelector('.login');
var loginBg = document.querySelector('#bg');
var loginForm = document.querySelector('form');
var closeBtn = document.querySelector('.close-btn');
    
    var eyeFlag = 0;
    eyeState.onclick = setEye;
    login.onclick = goLogin;
    closeBtn.onclick = leaveLogin;
    loginForm.children[0].addEventListener('mousedown', dragForm);
    
    // 表单内容不可选，不然看着不舒服
    loginForm.onselectstart = function(e) {
        e.preventDefault();
    }
    
    // 1、实现小眼睛改变密码输入状态
    function setEye() {
           if (!eyeFlag) {
            eyeState.className = 'open';
            pswInput.type = 'text';
            eyeFlag = 1;
        } else {
            eyeState.className = 'close';
            pswInput.type = 'password';
            eyeFlag = 0;
        }
    }
    
    // 2、外面登录按钮实现表单、遮罩层的显示和它自己隐藏
    function goLogin() {
        loginBg.style.visibility = 'visible';
        loginForm.style.display = 'block';
        this.style.display = 'none';
    }
    
    // 3、关闭按钮实现表单、遮罩层的隐藏和外面登录按钮的显示
    function leaveLogin() {
        loginBg.style.visibility = 'hidden';
        loginForm.style.display = 'none';
        login.style.display = 'block';
    }
    
    // 4、实现表单拖拽效果
    function dragForm(e) {
        // 当鼠标在表单的标题按下时获取它在表单元素内的坐标并绑定移动事件
        var x = e.pageX - this.parentNode.offsetLeft;
        var y = e.pageY - this.parentNode.offsetTop;
        document.addEventListener('mousemove', move);
        // 鼠标弹起移除移动事件
        this.addEventListener('mouseup', function() {
            document.removeEventListener('mousemove', move)
        });
        function move(event) {
            loginForm.style.left = event.pageX - x + 'px';
            loginForm.style.top = event.pageY - y + 'px';
    }
}

分析

  • 密码输入框，在点击后面的眼睛即 span 元素时通过 eyeFlag 变量来判断设置表单的 type 属性和 span 的类名（该用哪个小眼睛图）。
  • 鼠标是在表单标题区域按下后才有拖拽效果所以给标题绑定 mousedown 事件。
  • mousemove 和 mouseup 事件在鼠标按下后分别绑定给 document 和 this(标题)。

在实现拖拽时将 mousemove 事件绑定给标题的话会出现 bug 。快速拖拽时鼠标会离开标题导致表单没有跟上。所以要将这个事件绑定给 document 。

表单跟随鼠标的原理：在鼠标按下时根据鼠标和表单在页面的坐标得到它在表单的坐标（拖拽过程这个位置是不变的）。在鼠标移动过程根据鼠标在页面的动态坐标和它在表单的坐标即可获得表单在页面的动态坐标。

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

赞 (0)

相关推荐

  • JS实现模态框拖拽动态效果

    本文实例为大家分享了JS实现模态框拖拽的具体代码,供大家参考,具体内容如下 在实现这个案例效果首先我们了解几个属性,offsetLeft.offsetTop,e.pageX,e.pageY;这几个量都掌握以后就可以操作了… 分别解释一下: 1.offsetLeft:指的是返回一个带有定位父元素左边偏移量的值,当然如果需要操作的元素的父元素没有定位,那么它返回的就是距离浏览器最左侧页面的距离.2.offsetTop:指的是返回一个带有定位父元素顶部偏移量的值,当然如果需要操作的元素的父元素没有定位

  • js实现拖动模态框

    js实现拖动模态框

    模态框,我们也叫弹出框,可以在网易云,京东等之类的网页中看到. 效果如下: 代码思路: 1．点击弹出层,会弹出模态框,并且显示灰色半透明的遮挡层. 2．点击关闭按钮,可以关闭模态框,并且同时关闭灰色半透明遮挡层. 3．鼠标放到模态框最上面一行,可以按住鼠标拖拽模态框在页面中移动. 4．鼠标松开,可以停止拖动模态框移动. 5.在页面中拖拽的原理︰鼠标按下并且移动,之后松开鼠标 6.触发事件是鼠标按下mousedown,鼠标移动mousemove鼠标松开mouseup 7.拖拽过程:鼠标移动过程中,

  • js实现模态框的拖拽效果

    js实现模态框的拖拽效果

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

  • HTML+CSS+JavaScript实现j可拖拽模态框

    HTML+CSS+JavaScript实现j可拖拽模态框

    前言 模态框是指覆盖在父窗口上的子窗口,但在HTML网页中,并没有父窗口和子窗口的概念.这里是通过可隐藏的遮罩层和一个可隐藏的盒子来实现模态框的效果. 效果演示: 下面开始详细介绍如何实现一个可拖拽的模态框.只对 JS 部分详解,HTML 和 CSS 会放在文章底部的源代码中! JavaScript详解 整体效果是由以下几个事件构成: 点击立即登录按钮,弹出遮罩层和模态框. 点击小叉号关闭模态框和遮罩层. 鼠标在模态框的标题上按下时,计算鼠标在模态框中的坐标. 给整个HTML文档添加鼠标移动事件

  • js实现拖动模态框效果

    js实现拖动模态框效果

    本文实例为大家分享了js实现拖动模态框效果的具体代码,供大家参考,具体内容如下 1.实现效果: 点击链接,弹出模态框.点击关闭,关闭模态框. 点击标题部分,可以随意移动模态框的位置. 主要是获取鼠标位置. 2.思路: 3.代码: <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta http-equiv="

  • JavaScript实现模态框拖拽效果

    JavaScript实现模态框拖拽效果

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

  • JS实现简单可拖动的模态框

    JS实现简单可拖动的模态框

    本文实例为大家分享了JS实现简单可拖动的模态框的具体代码,供大家参考,具体内容如下 这篇博文有 简单实现 和 带样式且稍微复杂一点 的两个版本 简单版本 效果图: 实现思路: 给可拖动部分添加点击事件,触发时计算鼠标在可拖动部分中的坐标( e.pageX - box.offsetLeft ),得到 x y . 给 document 添加鼠标移动事件,因为当鼠标拖动模态框的时候,是在整个DOM窗口内移动的.保持鼠标与模态框的相对位置不变,所以需要计算此时的模态框的位置(e.pageX - x ),

  • JavaScript实现拖动模态框

    本文实例为大家分享了JavaScript实现拖动模态框的具体代码,供大家参考,具体内容如下 案例:模态框拖拽 弹出框,我们也称为模态框. 1.点击弹出层,会弹出模态框,并且显示灰色半透明的遮挡层.2.点击关闭按钮,可以关闭模态框,并且同时关闭灰色半透明遮挡层.3.鼠标放到模态框最上面一行,可以按住鼠标拖拽模态框在页面中移动.4.鼠标松开,可以停止拖动模态框移动. 案例分析 ①点击弹出层,模态框和遮挡层就会显示出来display:block;②点击关闭按钮,模态框和遮挡层就会隐藏起来display

  • JS实现简单拖动模态框案例

    JS实现简单拖动模态框案例

    本文实例为大家分享了JS实现简单拖动模态框的具体代码,供大家参考,具体内容如下 需要实现的效果: ①点击“点击,弹出登录框”后模态框和遮挡层就会显示出来 ②点击关闭按钮,模态框和遮盖层就会隐藏起来 ③页面拖拽 功能分析: 首先给上面的"点击,弹出登录框"设置点击事件,点击之后就显示遮罩层和模态框,然后给模态框上面的关闭按钮设置点击事件,点击之后就隐藏遮罩层和模态框.然后是拖拽过程,这个过程的实现较为复杂,主要分为下面几步: 1.明确模态框的真正位置是鼠标的坐标减去鼠标在模态框内的坐标.

  • JS实现拖动模态框案例

    JS实现拖动模态框案例

    本文实例为大家分享了JS实现拖动模态框的具体代码,供大家参考,具体内容如下 效果图: 需求分析: 点击登录后登录表单和遮罩层显示,点击关闭按钮隐藏. 输入密码时可以明文查看或者隐藏. 在表单的头部按下鼠标后可以拖拽表单. 鼠标弹起拖拽结束. 话不多说,我们直接上代码: <!DOCTYPE html> <html>   <head lang="en">     <meta charset="UTF-8">     <

随机推荐