Bom——拖拽框

拖拽框

效果

点击提示文本，会弹出登录框和遮罩层；鼠标按住左键移动时表单框也会跟随鼠标移动，鼠标松开则静止；点击关闭按钮遮罩层与登录框消失。

知识点

元素偏移量offset常用属性
①element.offsetParent：返回作为该元素带有定位的父级元素，如果父级都没有定位则返回body
②element.offsetTop：返回元素相对带有定位父元素上方的偏移
③element.offsetLeft：返回元素相对带有定位父元素左方的偏移
④element.offsetWidth：返回自身包括padding、边框、内容区的宽度，返回值不带单位
⑤element.offsetHeight：返回自身包括padding、边框、内容区的高度，返回值不带单位
鼠标事件对象
pageX、pageY：相对于文档边缘的坐标

核心思路

1. 设置好上方文本、遮罩层、登录框的css样式，隐藏遮罩层和登录框display:none;
2. 设置登录框的鼠标点击事件，被点击时登录框跟随，松开可以停止拖动模态框移动
3. 鼠标的坐标减去鼠标在盒子内的坐标，就是模态框真正的坐标，赋值给top和left

代码

html

    <div class="login-header"><a id="link" href="javascript:;">点击，弹出登录框</a></div>
    <div id="login" class="login">
        <div id="title" class="login-title">登录会员
            <span><a id="closeBtn" href="javascript:void(0);" class="close-login">关闭</a></span>
        </div>
        <div class="login-input-content">
            <div class="login-input">
                <label>用户名：</label>
                <input type="text" placeholder