js实现拖拽模态框三种js代码实现

HTML代码

<div class="link">
        <a id="linkA" href="javascript:;">点击我弹出登录模态框a>
    div>

    <div id="login" class="login">
        <div id="loginHeader" class="login-header">登录会员
            <span>
                <a href="javascript:;"><img id="closeBtn" class="close-btn" src="./img/关闭小.png" alt="">a>
            span>
        div>
        
        <div class="input-wrapper">
            <div class="login-input">
                <label for="username">用户名：label>
                <input class="input-list" id="username" type="text" placeholder="请输入用户名" name="usernameInfo">
            div>
            <div class="login-input">
                <label for="password">密码：label>
                <input class="input-list" id="password" type="password" placeholder="请输入密码" name="passwordInfo">
            div>
        div>
        
        <div class="login-btn" id="loginBtn">
            <a href="javascript:;" id="btn" class="btn">登录a>
        div>
    div>
    
    <div class="login-bg" id="loginBg">div>

CSS代码

js代码

方式1

<script>
        var linkA = document.getElementById('linkA');
        var login = document.getElementById('login');
        var closeBtn = document.getElementById('closeBtn');
        var loginBg = document.getElementById('loginBg');
        var loginHeader = document.getElementById('loginHeader');
        // 显示弹出框
        linkA.onclick = function () {
            // alert(111);
            login.style.display = 'block';
            loginBg.style.display = 'block';
        }
        // 关闭弹出框
        closeBtn.onclick = function () {
            // alert(222);
            login.style.display = 'none';
            loginBg.style.display = 'none';
        }

        //实现拖拽
        // 1、鼠标按下事件
        loginHeader.onmousedown = function (event) {
            // e.pageX/Y	获得鼠标所在的位置
            // element.offsetTop：返回带有定位元素的父类上方的偏移量
            // element.offsetLeft：返回带有定位元素的父类左边框的偏移量
            var x = event.pageX - login.offsetLeft;
            var y = event.pageY - login.offsetTop;

            // 鼠标滑动事件
            document.onmousemove = function (event) {
                login.style.left = event.pageX - x + 'px';
                login.style.top = event.pageY - y + 'px';
            }
            // 鼠标松开事件
            document.onmouseup = function () {
                // 移除鼠标滑动事件
                document.onmousemove = null;
                // 移除松开鼠标事件
                document.onmouseup = null;
            }
        }

    </script>

方式2

 <script>
        var linkA = document.querySelector('#linkA');
        var login = document.querySelector('#login');
        var closeBtn = document.querySelector('#closeBtn');
        var loginBg = document.querySelector('#loginBg');
        var loginHeader = document.querySelector('#loginHeader');

        linkA.addEventListener('click', function (event) {
            login.style.display = 'block';
            loginBg.style.display = 'block';
        });
        closeBtn.addEventListener('click', function (event) {
            login.style.display = 'none';
            loginBg.style.display = 'none';
        })
        loginHeader.addEventListener('mousedown', function (event) {
            var x = event.pageX - login.offsetLeft;
            var y = event.pageY - login.offsetTop;

            document.addEventListener('mousemove', move);
            // 因为function参数传的如果是匿名函数,没办法用removeEventListener来移除监听，
            // 所以这里只能封装一个move()函数，然后在监听事件里添加一下。
            function move(event) {
                login.style.left = event.pageX - x + 'px';
                login.style.top = event.pageY - y + 'px';
            }

            document.addEventListener('mouseup', function () {
                document.removeEventListener('mousemove', move);
            });
        })
    </script>

方式3

<script>
        var linkA = document.getElementById('linkA');
        var login = document.getElementById('login');
        var closeBtn = document.getElementById('closeBtn');
        var loginBg = document.getElementById('loginBg');
        var loginHeader = document.getElementById('loginHeader');
        // 显示弹出框
        linkA.onclick = function () {
            // alert(111);
            login.style.display = 'block';
            loginBg.style.display = 'block';
        }
        // 关闭弹出框
        closeBtn.onclick = function () {
            // alert(222);
            login.style.display = 'none';
            loginBg.style.display = 'none';
        }

        draw(loginHeader, login);

        function draw(obj, outer) {
            obj.onmousedown = function (event) {
                obj.setCapture && obj.setCapture();
                event = event || window.event;
                var boxLeft = event.clientX - outer.offsetLeft;
                var boxTop = event.clientY - outer.offsetTop;
                document.onmousemove = function (event) {
                    event = event || window.event;
                    outer.style.left = event.clientX - boxLeft + "px";
                    outer.style.top = event.clientY - boxTop + "px";
                };
                document.onmouseup = function (event) {
                    document.onmousemove = null;
                    document.onmouseup = null;
                    obj.releaseCapture && obj.releaseCapture();
                };
                return false;
            };
        }
    </script>

图标是在阿里矢量图标库随便下载，大家不想下载也可以直接在a标签中加文字，用border-radius削个圆效果也不错。代码比较简单，有大佬看到哪里不足的话，还望指出，一起学习进步。原码全部上传，只求点赞，哈哈哈！