实现点击按钮弹出登陆框并且可移动操作

在网页上经常会有当我们点击一个按钮时弹出一个登陆框；一般这个登陆框都是固定在页面可视区中央不可移动，今天分享一个可移动的弹框；
HTML代码：

<!-- 点击按钮 -->
<div class="btn"><a href="#">登陆</a></div>
<!-- 弹出框 -->
<div class="login">
    <div id="head">
        <h3>用户登陆</h3>
        <span></span>
    </div>
    <div class="login-body">
        <p>登陆界面</p>
        <p class="user">
            账号：<input type="text" />
        </p>
        <p class="pwd">
            密码：<input type="password" />
        </p>
        <p>
            <input type="checkbox" />下次自动登录
            <a href="#">忘记密码</a>
        </p>
        <div class="send"></div>
    </div>
</div>
<!-- 透明黑色背景 -->
<div class="layer"></div>

CSS代码：

*{ margin: 0; padding: 0; }
.btn{ 
    width: 263px; height: 40px; 
    background: url('../images/but_bg2.jpg') no-repeat 0 0; 
    text-align: center;  
    margin: 10px 20px;  
    line-height: 40px; 
    border: 1px solid #fff; 
}
.btn a{ 
    font-size: 16px; 
    text-decoration: none; 
    color: #fff; 
}
/* 弹框默认隐藏 */
.login{ 
    width: 600px; 
    box-shadow: 0 0 10px #efefef; 
    display: none; 
    position: absolute; 
    background: #fff;
    z-index: 10; 
}
#head{ 
    height: 50px; width: 100%; 
    background: orange;  
}
#head h3{ 
    color: #fff; 
    line-height: 50px; 
    margin-left: 15px; 
    font-size: 20px; 
    font-weight: normal; 
    letter-spacing: 2px; 
    display: inline-block; 
}
#head span{ 
    float: right;
    background: url("../images/close.png") no-repeat 0 0; 
    width: 17px; height: 18px; 
    margin-top: 16px; 
    margin-right: 10px; 
    cursor: pointer; 
}
#head span:hover{ background: url("../images/close.png") no-repeat 0 -18px; }
.login-body{ 
    width: 570px;
    margin: 20px auto; 
}
.login-body p{ 
    width:100%; 
    text-align: center; 
}
.login-body p:nth-of-type(1){ 
    background: url("../images/new.png") no-repeat 0 0; 
    background-size: 30px 30px; 
    text-indent: 40px; 
    line-height: 30px; 
    font-size: 14px; 
    color: #666; 
    text-align: left; 
}
.user input,.pwd input{ width: 240px; height: 30px; }
.user,.pwd{ margin: 15px 0; } 
.login-body p:nth-of-type(4) a{ 
    display: inline-block; 
    font-size: 14px; 
    margin-left: 60px; 
}
.send{ 
    width: 263px; height: 40px; 
    background: url("../images/but_bg1.jpg") no-repeat 0 0; 
    margin: 30px auto; 
}
/* 透明黑色背景,默认隐藏 */
.layer{ 
    background: #333; 
    opacity: 0.4; 
    width: 100%; height: 100%;
    position: absolute; 
    top: 0; top:0; 
    display: none; 
}

JS代码：

$(function(){
    /*点击按钮弹框和背景层出现*/
    $('.btn').click(function(){
        $('.layer').show();
        $('.login').show();
        center();
    });
    /*当窗口大小改变时弹框仍然位于中央*/
    $(window).resize(function(){
        center();
    });
    /*点击弹框右上角关闭按钮关闭弹框和背景层*/
    $("#head span").click(function(){
        $(".layer").hide();
        $(".login").hide();
    });
    /*使弹框位于中央*/
    function center(){
        var left = ( $(window).width() - $(".login").width() )/2;
        var top =( $(window).height() - $(".login").height() )/2;
        $('.login').css({'left':left,'top':top});
    }

});

window.onload=function(){
    var title = document.getElementById('head');
    move(title);
}
/*封装移动函数*/
function move( obj ){
    var onOff=false;
    var l=0,t=0,x=0,y=0;
    var parent = obj.parentNode;

    obj.onmousedown=function( event ){
        var e =event||window.event;
        x=e.clientX;
        y=e.clientY;
        l=parseInt(parent.offsetLeft);
        t=parseInt(parent.offsetTop);
        onOff=true;
        obj.style.cursor="move";    //此时鼠标形状为可移动手势
        document.onmousemove=function(event){
             if( onOff ){
                var e =event||window.event;
                parent.style.left = l+e.clientX-x+'px';
                parent.style.top = t+e.clientY-y+'px';

             }
        }
        document.onmouseup = function(){
            if(onOff){
                onOff = false;
            }
        };

    };
}