从零到一学JS：拖拽模态框

每日一kun：当你觉得又丑又穷的时候，不要悲伤，至少你的判断还是正确的。

写一个模态框，然后在特定区域拖拽模态框，随着鼠标移动而移动，代码如下

js代码
        var login = document.querySelector(".login")
        var close = document.querySelector(".close")
        var mask = document.querySelector(".mask")
        var content = document.querySelector(".content")
        var move = document.querySelector(".move")


        login.addEventListener("click", function () {
            mask.style.display = "block"
            content.style.display = "block"
        })
        close.addEventListener("click", function () {
            mask.style.display = "none"
            content.style.display = "none"
        })
        move.addEventListener("mousedown", function (e) {
            var x = e.pageX - content.offsetLeft
            var y = e.pageY - content.offsetTop

            move.addEventListener("mousemove", movefn)
            move.addEventListener("mouseup", function () {
                move.removeEventListener("mousemove", movefn)
            })
            function movefn(e) {
                content.style.left = e.pageX - x + "px"
                content.style.top = e.pageY - y + "px"
            }
        })
html代码
    <div class="container">
        <a href="javascript:;" class="login">点击弹出登录界面</a>
        <div class="mask">

        </div>
        <div class="content">
            <div class="move">移动模态框</div>
            <a href="javascript:;" class="close">关闭界面</a>
        </div>
    </div>
css代码
    .mask {
        position: fixed;
        z-index: 1000;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        background: rgba(0, 0, 0, .4);
        display: none;

    }

    .login {
        left: 50%;
        position: fixed;
        transform: translate(-50%, 0);
    }

    .content {
        display: none;
        position: fixed;
        z-index: 5000;
        width: 80%;
        max-width: 300px;
        min-height: 300px;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #ffffff;
        text-align: center;

    }

    .move {
        height: 50px;
        background-color: chocolate;
        cursor: crosshair;
    }

结果

思考：因为translate属性导致整个div x y 轴发生变化，偏移150px距离，所以直接导致e.pageX - content.offsetLeft在弹出的盒子界面靠左边会出现负数，这是因为e.pageX是正常获得的值，但是offsetLeft因为150px的偏移量会比正常的值少150px，不过不影响最后结果，我想是因为left赋值的时候会加上偏移量，不然不加上会直接导致盒子向右偏移150px，不过从结果来看一切正常