利用css和js制作模块框拖拽的效果

 这是一个利用css 和js做出来的一个登录模块框拖动的案例

 这是基本框架，应该很好制作，就是一个登录框。

<script>
        var dianji = document.querySelector('.dianji');
        var close = document.querySelector('.close-login');
        var login = document.querySelector('.login');
        var bg = document.querySelector('.login-bg');
        var title = document.querySelector('.title');
        dianji.addEventListener('click', function() {
            login.style.display = 'block';
            bg.style.display = 'block';
        })
        close.addEventListener('click', function() {
                login.style.display = 'none';
                bg.style.display = 'none';
            })
            // 当我们鼠标按下时就获取鼠标在盒子内的坐标
        title.addEventListener('mousedown', function(e) {
            var x = e.pageX - login.offsetLeft;
            var y = e.pageY - login.offsetTop;
            // 鼠标移动的时候，把鼠标在页面中的坐标减掉鼠标在盒子内的坐标  这就是模块框的坐标
            document.addEventListener('mousemove', move)

            function move(e) {
                login.style.left = e.pageX - x + 'px';
                login.style.top = e.pageY - y + 'px';
            }
            document.addEventListener('mouseup', function() {
                document.removeEventListener('mousemove', move)
            })
        })
    </script>

1.给点击跳出登录框添加点击监听，当我们点击后将登录框和遮罩层显示出来。

2.给关闭添加点击监听，当我们点击后将登录框和遮罩层隐藏起来

3.获取我们鼠标按下的时候鼠标在盒子内的坐标，e.pageX获取的是鼠标距离浏览器的距离，login.offsetLeft获取的是登录框距离浏览器的距离。将他俩相减就是鼠标在盒子中的坐标。

4.当我们鼠标移动的时候，将登录框的left  和top值改为鼠标这时候的坐标减去鼠标在盒子中的坐标  就可以实现鼠标移动登录框也移动的效果了。

5.当鼠标抬起的时候将监听移除。

这里登录框需要加上定位(固定定位)。

总结：要想让一个盒子跟着鼠标一起移动大概需要的步骤有：先获取鼠标在盒子中的坐标 ，然后将盒子的坐标更改成 鼠标坐标减去鼠标在盒子中的坐标就可以了。