JavaScript之offset以及模态框拖拽的实现

转自个人网站：https://www.jinxiaoliang.cn
一、offset概述
offset翻译过来就是偏移量，使用offset的相关属性可以动态的获取元素的偏移、大小等

• 获得元素距离带有定位父元素的位置
• 获得该元素自身的大小（高宽）
• 注意：返回的数值都不带单位

offset系列常用属性：

offset系列属性	作用
element.offsetParent	返回该元素带有定位的父级元素，如果父级都没有定位则返回body
element.offsetTop	返回元素相对带有定位父元素上方的偏移
element.offsetLeft	返回元素相对带有定位父元素上方的偏移
element.offsetWidth	返回自身包括padding、border、内容区的宽度
element.offsetHeight	返回自身包括padding、border、内容区的高度

二、offset和style的区别

offset	style
可以等到任意样式表中的样式值	只能得到行内样式表的样式值
得到的值没有单位	得到的值都有单位
得到的值是包括padding+border+width	得到的值不包含padding和border的值
是只读属性，只能获得值，不能赋予值	是可读写属性，可以获取值，也能赋予值
更合适用来获取元素值	更适合用来给元素赋值

三、案列—模态拖拽框

下面介绍一个简单案列的实现，如下图：

代码如下

html：

<h1>点击，弹出登陆框</h1>
<div class="login">
    <h3>登录会员</h3>
    <form action="">
        <label for="">用户名： </label><input type="text" placeholder="请输入用户名"><br>
        <label for="">登录密码：</label><input type="password" placeholder="请输入登陆密码">
        <button>关闭</button>
    </form>
</div>

css:

body {
            position: relative;
            background: #ccc
        }
        h1{
            margin:5px auto;
            width: 300px;
            font-weight: normal;
            z-index: 0
        }
        h3 {
            cursor: move;
        }
        .login {
            width: 500px;
            height: 200px;
            background: #fff;
            text-align: center;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,50%);
            display: none;//开始是隐藏的
        }
        .login input {
            width: 200px;
            line-height: 20px;
            padding-left: 5px;
            margin-bottom: 10px;
            outline: none;
        }
        .login input[type=text]{
            margin-right: -14px
        }
        button {
            width: 40px;
            height: 40px;
            position: absolute;
            background: #fff;
            border-radius: 50%;
            border: none;
            top: -20px;
            right: -20px;
            outline: none;
            cursor: pointer;
        }

js:

var alert = document.querySelector('h1');
        //获取元素
        var login = document.querySelector('.login');
        var btn = document.querySelector('button');
        var mdown =document.querySelector('h3');
        alert.addEventListener('click', function(){
            login.style.display = 'block';
        });
        btn.addEventListener('click',function(){
            login.display.block = 'none';
        });

        mdown.addEventListener('mousedown', function(e){
            var x = e.pageX - login.offsetLeft;
            var y = e.pageY - login.offsetTop;
            document.addEventListener('mousemove',move);
            function move(e){
                var px = e.pageX - x;
                var py = e.pageY - y;
                login.style.left = px  + 'px';
                login.style.top = py +'px';
            }
            document.addEventListener('mouseup',function(){
                document.removeEventListener('mousemove',move);
            });
        });

案列分析：

1.点击弹出层，会弹出模态框

2.点击关闭按钮，可以关闭模态框

3.鼠标放在最上面一行可以按住鼠标拖拽模态框在页面移动

4.鼠标松开，可以停止拖动模态框移动

实现分析：

1.点击弹出层后模态框会显示出来display:block;

 alert.addEventListener('click', function(){
            login.style.display = 'block';
        });//给弹出层添加点击监听器，点击之后使模态框的display:none转变为display:block;

2.点击关闭按钮之后，可以关闭模态框display:none;

 btn.addEventListener('click',function(){
             login.display.block = 'none';
        });//给关闭按钮添加点击监听器，点击之后使模态框的display:block转变为display:none;

3.在页面中拖拽的原理：鼠标按下并且移动，之后松开鼠标，拖拽框停止移动

4.鼠标按下mousedown,鼠标移动mousemove,鼠标松开mouseup

5.鼠标按下过程：就是按住最上面哪一行h3标签，然后给他添加mousedown监听器事件

mdown.addEventListener('mousedown', function(e){//给拖拽行添加监听器
            var x = e.pageX - login.offsetLeft;//鼠标到拖拽框的左端距离
            var y = e.pageY - login.offsetTop;//鼠标到拖拽框上端距离
            document.addEventListener('mousemove',move);//当按住鼠标之后就进行移动
            function move(e){
                var px = e.pageX - x;//拖拽框到浏览器左边的距离
                var py = e.pageY - y;//拖拽框到浏览器上面的而距离
                login.style.left = px  + 'px';//拖拽框到浏览器左边的距离赋值给login的left值
                login.style.top = py +'px';//将拖拽框到浏览器上面的距离赋值给login的login值
            }
            document.addEventListener('mouseup',function(){//松开鼠标之后，移出move事件
                document.removeEventListener('mousemove',move);
            });
        });

5.鼠标移动过程：在按住的监听器下再添加一个移动的监听器事件，并动态的获取拖拽框的左端和上端距离浏览器的距离，在赋值给login的left和top；实现拖拽移动的效果

6.鼠标松开过程：添加鼠标松开事件，松开事件的时候，添加移除move事件，这时就可以实现模态框拖拽了。