拖动模态框

拖动模态框

实现步骤：
①点击弹出层，模态框和遮挡层就会显示出来display:block；
②点击关闭按钮，模态框和遮挡层就会隐藏起来display:none；
③在页面中拖拽的原理︰鼠标按下并且移动,之后松开鼠标；
④触发事件是鼠标按下mousedown，鼠标移动mousemove，鼠标松开mouseup；
⑤拖拽过程:鼠标移动过程中，获得最新的值赋值给模态框的left和top值，这样模态 框可以跟着鼠标走了；
⑥鼠标按下触发的事件源是最上面一行，就是id为title；
⑦鼠标的坐标减去鼠标在盒子内的坐标, 才是模态框真正的位置；
⑧鼠标按下，我们要得到鼠标在盒子的坐标；
⑨鼠标移动，就让模态框的坐标设置为︰鼠标坐标减去盒子坐标即可，注意移动事件写到按下事件里面；
⑩鼠标松开，就停止拖拽,就是可以让鼠标移动事件解除。

<script>
        // 1.获取元素
        var login=document.querySelector('.login');
        var mask=document.querySelector('.login-bg');
        var link=document.querySelector('#link');
        var closeBtn=document.querySelector('#closeBtn');
        var title=document.querySelector('#title');
        // 2.点击弹出层这个链接 让mask 和 login 显示出来
        link.addEventListener('click',function(){
            mask.style.display='block';
            login.style.display='block';
        })
        // 3.点击closeBtn 隐藏mask 和 login
        closeBtn.addEventListener('click',function(){
            mask.style.display='none';
            login.style.display='none';
        })
        // 4.开始拖拽
        //(1) 当我们鼠标按下，就获得鼠标在盒子内的坐标
        title.addEventListener('mousedown',function(e){
            var x=e.pageX-login.offsetLeft;
            var y=e.pageY-login.offsetTop;
            //(2) 鼠标移动的时候，把鼠标在页面中的坐标，减去 鼠标在盒子内的坐标就是模态框的left和top值
            document.addEventListener('mousemove',move)
            function move(e){
                login.style.left=e.pageX-x+'px';
                login.style.top=e.pageY-y+'px';
            }
            //(3) 鼠标弹起，就让鼠标移动时间解除
            document.addEventListener('mouseup',function(){
                document.removeEventListener('mousemove',move)
            })
        })
    </script>