模态框的拖动完整代码详细解析

bsf000000___

于 2023-08-09 19:29:39 发布

阅读量173

点赞数

CC 4.0 BY-SA版权

文章标签：前端 javascript html css css3 开发语言

本文链接：https://blog.youkuaiyun.com/bsf000000___/article/details/132195532

本文详细解析了如何通过JavaScript和HTML的事件处理机制，实现网页上的模态框通过鼠标拖动功能。涉及鼠标按下、鼠标移动和鼠标弹起事件的监听与处理，展示了完整的代码实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

模态框的拖动完整代码详细解析

这是一个登录会员的网页代码。该页面包括一个点击按钮，点击后会弹出一个对话框，用于用户登录。对话框中包含用户名和密码输入框，以及登录按钮。用户可以在输入框中输入用户名和密码，然后点击登录按钮进行登录操作。对话框上有一个关闭按钮，点击后会关闭对话框。

在这段代码中，通过鼠标事件来获取对话框的坐标位置，实现对话框的拖动功能。以下是相关代码的详细解析：

在character.addEventListener('mousedown', function (e) { ... })中，给对话框标题栏添加了一个鼠标点击事件的监听器。当用户按下鼠标左键时，执行函数体内的代码。
在事件处理函数内部，首先获取鼠标点击时光标在页面上的坐标(e.pageX和e.pageY)，然后计算出光标在对话框内的相对坐标：var x = e.pageX - newDoc.offsetLeft和var y = e.pageY - newDoc.offsetTop。
接下来，在document对象上添加了一个鼠标移动事件监听器：document.addEventListener('mousemove', move)。move是定义的一个函数，用于处理鼠标移动事件。
在move函数中，通过计算鼠标在页面上的坐标减去之前保存的对话框内的相对坐标，就可以得到对话框需要移动的距离。将计算出的距离值赋给对话框的style.left和style.top属性，即可实现对话框的随鼠标移动而移动。
最后，在document对象上添加了一个鼠标弹起事件监听器：document.addEventListener('mouseup', function() { ... })。在鼠标弹起时，移除了先前添加的鼠标移动事件监听器：document.removeEventListener('mousemove', move)。

通过以上步骤，当用户按下鼠标左键并拖动时，对话框会跟随鼠标移动，实现了对话框的拖动功能

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        /* body{
            display: none;
            background-color: #AFB2AF;
        } */
        .old {
            /* display: inline-block; */
            font-size: 40px;
            text-align: center;
            font-family: '华文行楷';
            margin: 10px auto;
            /* width: 200px;
            height: 60px; */
        }

        
        .new {
            background-color: white;
            width: 512px;
            height: 280px;
            position: fixed;
            /* position: relative; */
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            z-index: 999;
            box-shadow: 10px 10px 10px lightcyan,
                -10px -10px 10px lightcyan;
            display: none;
        }
        .top_p {
            font-size: 25px;
            text-align: center;

        }


        .new div {
            font-size: 20px;
        }

        .ipt {
            width: 90%;
            margin: 0 auto;
            margin-top: 30px;
        }

        .ipt div {
            float: left;
        }

        .left {
            width: 30%;
            text-align: right;
            line-height: 40px;
        }

        .right {
            width: 50%;
            height: 40px;

        }

        .btn {
            display: inline-block;
            position: absolute;
            left: 490px;
            top: -20px;
            text-align: center;
        }

        .btn a {
            background-color: white;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: 1px solid white;
            text-decoration: none;
            color: black;
            font-size: 16px;
            display: inline-block;
            line-height: 40px;
        }

        .bottom {
            margin: 30px auto;
            text-align: center;
        }

        .bottom button {
            width: 40%;
            height: 40px;
        }

        .bg {
            width: 100%;
            height: 100%;
            background-color: #B0B3B0;
            position: fixed;
            top: 0;
            left: 0;
            display: none;
            z-index: -2;
        }
    </style>
</head>

<body>
    <div class="old">点击，弹出对话框</div>
    <div class="new">
        <p class="top_p">登陆会员</p>
        <div class="ipt">
            <div class="left">用户名：</div>
            <input class="right" type="text" name="username" id="text" placeholder="请输入用户名">
        </div>
        <div class="ipt">
            <div class="left">登陆密码：</div>
            <input class="right" type="password" name="password" id="password" placeholder="请输入登录密码">
        </div>

        <div class="btn"><a class="close_btn">关闭</a></div>
        <div class="bottom"><button class="login">登录会员</button></div>

    </div>
    <div class="bg"></div>
    <script>
        var old = document.querySelector('.old')
        var closeBtn = document.querySelector('.close_btn')
        var bg = document.querySelector('.bg')
        var newDoc = document.querySelector('.new')
        var character = document.querySelector('.top_p')
        old.addEventListener('click', function () {
            bg.style.display = 'block'
            newDoc.style.display = 'block'
        })
        closeBtn.addEventListener('click', function () {
            bg.style.display = 'none'
            newDoc.style.display = 'none'
        })
        //当鼠标按下，就获得鼠标在盒子内的坐标
        character.addEventListener('mousedown', function (e) {
            var x = e.pageX - newDoc.offsetLeft
            console.log(newDoc.offsetLeft);
            var y = e.pageY - newDoc.offsetTop
            console.log(x)
            console.log(y);
            // 鼠标移动的时候，把鼠标在页面中的坐标减去鼠标在盒子内部的坐标就是模态框的left和top值
            document.addEventListener('mousemove', move)
            function move(e) {
                newDoc.style.left = e.pageX - x + 'px'
                newDoc.style.top = e.pageY - y + 'px'
            }
            //鼠标弹起，就让鼠标移动事件移除
            document.addEventListener('mouseup',function(){
                document.removeEventListener('mousemove',move)
            })
        })
    </script>
</body>

</html>

效果图
在这里插入图片描述