JavaScript与CSS实现可拖拽模态框的常见问题及定位修复方案

<!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>
        * {
            padding: 0;
            margin: 0;
        }
        
        body {
            background-color: white;
        }
        
        .dianji {
            height: 50px;
            width: 300px;
            font-size: 20px;
            margin: 10px auto;
            cursor: pointer;
        }
        
        .loginBox {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            /* margin: 100px auto; */
            box-sizing: border-box;
            height: 200px;
            width: 370px;
            background-color: white;
            text-align: center;
            display: none;
        }
        
        .loginBox>span {
            position: absolute;
            top: -15px;
            right: -15px;
            height: 30px;
            width: 30px;
            font-size: 8px;
            line-height: 30px;
            border-radius: 50%;
            background-color: white;
            border: 1px solid #cccccc;
        }
        
        .loginBox h5 {
            /* position: relative; */
            margin-bottom: 18px;
            font-weight: normal;
            font-size: 16px;
            cursor: move;
        }
        
        .uname {
            margin: 18px 0 15px 15px;
            height: 25px;
            line-height: 25px;
        }
        
        .uname span,
        .psw span {
            font-size: 12px;
        }
        
        .uname input,
        .psw input {
            height: 25px;
            width: 230px;
            font-size: 12px;
            outline: none;
        }
        
        .loginBox button {
            margin: 20px;
            width: 190px;
            height: 30px;
            border: 1px solid #cccccc;
        }
    </style>
</head>

<body>
    <div class="dianji">点击，弹出登录框</div>
    <div class="loginBox">
        <span class="close">关闭</span>
        <h5>登录会员</h5>
        <div class="uname"><span>用户名：</span> <input type="text" placeholder="请输入用户名"></div>
        <div class="psw"><span>登录密码：</span> <input type="password" placeholder="请输入密码"></div>
        <button>登录</button>
    </div>
    <script>
        var dianji = document.querySelector('.dianji');
        var loginBox = document.querySelector('.loginBox');
        var close = document.querySelector('.close');
        var bodyy = document.body;
        var move_area = document.querySelector('h5');
        dianji.addEventListener('click', function() {
            bodyy.style.backgroundColor = '#ccc';
            loginBox.style.display = 'block';
        })
        close.addEventListener('click', function() {
            bodyy.style.backgroundColor = 'white';
            loginBox.style.display = 'none';
        })
        move_area.addEventListener('mousedown', function(e) {
            var x = e.pageX - loginBox.offsetLeft;
            var y = e.pageY - loginBox.offsetTop;
            console.log('x=' + x + '  y=' + y);
            document.addEventListener('mousemove', move)

            function move(e) {
                loginBox.style.left = e.pageX - x + 'px';
                loginBox.style.top = e.pageY - y + 'px';
            }
            //鼠标弹起，就是让鼠标移动时间解除
            document.addEventListener('mouseup', function() {
                document.removeEventListener('mousemove', move);
            })
        })
    </script>
</body>

</html>