js-模态框的拖动

效果如下：

代码如下：

<div class="clickBtn">点击，弹出登录框</div>
    <div class="login">
        <h3>登录会员</h3>
        <table>
            <tr>
                <td class="left">用户名：</td>
                <td><input type="text" placeholder="请输入用户名" name="" id=""></td>
            </tr>
            <tr>
                <td class="left">登陆密码：</td>
                <td><input type="text" placeholder="请输入登录密码" name="" id=""></td>
            </tr>
        </table>
        <button>登录会员</button>
        <div class="closebtn">关闭</div>
    </div>

    <div class="mask"></div>

style:

<style>
    * {
        margin: 0;
        padding: 0;
    }

    .mask {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        height: 100vh;
        width: 100%;
        background-color: rgba(0, 0, 0, .3);
    }

    .clickBtn {
        margin: 10px auto;
        width: 200px;
        border: 0px;
        font-size: 20px;
        font-weight: 700;
        background-color: #fff;
        cursor: pointer;
    }

    .login {
        visibility: hidden;

        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        display: flex;
        flex-direction: column;
        align-items: center;

        padding: 20px;
        box-sizing: border-box;

        width: 500px;
        height: 300px;
        border: 1px solid #eee;
        background-color: #fff;
        z-index: 1;
    }

    .login h3 {
        margin-bottom: 20px;
        font-size: 20px;
        font-weight: 400;
        height: 30px;
        width: 100%;
        text-align: center;
        cursor: move;
    }

    .login table {
        flex: 1;
        display: flex;
        margin: 0;
        padding: 0;

    }

    .login table tr {
        height: 50px;
        text-align: right;
    }

    .login table tr input {
        width: 300px;
        height: 30px;
        border-radius: 2px;
        border: 1px solid #eee;
    }

    .login table .left {
        font-weight: 400;
        width: 40%;
    }

    .login button {
        width: 260px;
        height: 40px;
        background-color: #fff;
        border: 1px solid #eee;
        border-radius: 2px;
        cursor: pointer;
    }

    .login button:hover {
        color: #fff;
        background-color: skyblue;
    }

    .login .closebtn {
        position: absolute;
        right: 0;
        top: 0;
        transform: translate(50%, -50%);
        width: 50px;
        height: 50px;
        text-align: center;
        line-height: 50px;
        background-color: orange;
        border-radius: 50%;
        cursor: pointer;
    }
</style>

js:

<script>
        let btn = document.querySelector('.clickBtn')
        let login = document.querySelector('.login')
        let closebtn = document.querySelector('.closebtn')
        let mask = document.querySelector('.mask')

        let title = document.querySelector('h3')
        let body = document.querySelector('body')
        btn.addEventListener('click', function () {
            mask.style.display = 'block'
            login.style.visibility = 'visible'
        })

        closebtn.addEventListener('click', function () {
            mask.style.display = 'none'
            login.style.visibility = 'hidden'
        })

        title.addEventListener('mousedown', function (e) {
            let x = e.pageX - login.offsetLeft
            let y = e.pageY - login.offsetTop
            function move(e) {
                // 如果此处仍然用 x=e.pageX - x;login.style.left=x+'px' 就会出现错误，因为这里是浅拷贝，引用的是同一个地址，而mousedown事件一直触发mousemove事件，导致x对应地址的值一直在改变，且login.style.left=x+'px' 指向的也是这个地址，所以页面的区域就会出现晃动
                var xx = e.pageX - x;
                var yy = e.pageY - y;
                console.log(x, y);
                login.style.top = yy + 'px';
                login.style.left = xx + 'px';

            }

            // 在页面任何地方都应触发mousemove，故监听document的mousemove事件
            document.addEventListener('mousemove', move)

            // 在页面任何地方都应触发mouseup，故监听document的mouseup事件
            document.addEventListener('mouseup', function () {
                document.removeEventListener('mousemove', move)
            })
        })
    </script>