23.模拟拖动登录框效果

HTML部分： 

<div class="login_div">

        <a class="login" href="javascript:;">点击，弹出登录框</a>

</div>

    <div class="login_content">

        <div class="close">

            <a href="javascript:;">关闭</a>

        </div>

        <div class="login_huiyuan">登录会员</div>

        <div class="login_input_content">

            <div class="login_input">

                <span>用户名：</span>

                <input type="text" placeholder="请输入用户名">

            </div>

            <div class="login_input">

                <span>登录密码：</span>

                <input type="password" placeholder="请输入登录密码">

            </div>

        </div>

        <button>登录会员</button>

    </div>

    <div class="bg_gray"></div>

js代码部分： 

    <script>

        // 1、获取元素

        var login = document.querySelector('.login');

        var bg_gray = document.querySelector('.bg_gray');

        var close = document.querySelector('.close');

        var login_content = document.querySelector('.login_content');

        var login_huiyuan = document.querySelector('.login_huiyuan');

        // 2、点击登录，弹出登录框和背景

        login.addEventListener('click', function() {

            bg_gray.style.display = 'block';

            login_content.style.display = 'block';

        });

        // 3、点击关闭按钮，关闭的登陆和背景

        close.addEventListener('click', function() {

            bg_gray.style.display = 'none';

            login_content.style.display = 'none';

        });

        // 4、鼠标事件、mousedown、mousemove、mouseup

        // 1)当我们鼠标按下，获取鼠标在盒子内的坐标

        login_huiyuan.addEventListener('mousedown', function(e) {

            var x = e.pageX - login_content.offsetLeft;

            var y = e.pageY - login_content.offsetTop;

            // 2)当我们鼠标移动，把鼠标在页面中的坐标减去鼠标在盒子内的坐标，就是模态框的left和top值

            // 页面中的任何一个地方都可以移动鼠标，所以是document

            document.addEventListener('mousemove', move);

            function move(e) {

                login_content.style.left = e.pageX - x + 'px';

                login_content.style.top = e.pageY - y + 'px';

            }

            // 3）鼠标弹起移除移动事件,页面中任何一个地方都可以移除，所以也是document

            document.addEventListener('mouseup', function() {

                document.removeEventListener('mousemove', move);

            })

        })

    </script>