可拖拽窗口

前些天无聊，自己做百度的页面的时候，点击登录，看到登录框是可拖拽的，于是到网上找了点资料。
一个做设计的朋友(辣鸡)给我弄了一个登录的窗口，于是乎，本着物尽其用的想法，做了一下可拖拽测试。
首先是布局：

<button id="show">登录</button>
        <div class="container">
            <div class="title">登录/注册<button id="hidden">X</button></div>
            <div class="content">
                <form action="">
                    <input type="text" placeholder="输入名字" />
                    <input type="text" />
                    <input type="text" />
                    <label><input type="submit" value="登录" /></label>
                    <a href="#">忘记密码</a>
                </form>
                <div class="line">
                    <span>第三方</span>
                </div>
                <div class="clearfix"></div>
                <ul>
                    <li><a href="#"></a></li>
                    <li><a href="#"></a></li>
                    <li><a href="#"></a></li>
                </ul>
            </div>
        </div>

接下来是CSS(为了偷懒用了*，最好是不要用)：

* {
    margin: 0;
    padding: 0;
}

ul {
    list-style: none;
}

#show{
    width: 200px;
    height: 40px;
    position: relative;
    left: 50%;
    top: 40px;
    margin-left: -120px;
    border-radius: 10px;
    box-shadow: 0 5px 8px #F36075;
}
#hidden{
    float: right;
    margin: 30px 10px 0 0;
    width: 20px;
    height: 20px;
    color: #fff;
    font-size: 18px;
    border: 0 none;
    background: #ED3D3D;
}
.container {
    width: 535px;
    height: 705px;
    position: fixed;
    top: 0;
    left: 0;
    display: none;
}

.title {
    width: 535px;
    height: 80px;
    background: #ed3d3d;
    font-family: "微软雅黑";
    font-size: 22px;
    color: #FFFFFF;
    text-align: center;
    line-height: 80px;
    cursor: move;
}

.content {
    width: 533px;
    height: 624px;
    border: 1px solid black;
    border-top: 0 none;
    overflow: hidden;
}

form {
    display: block;
    width: 290px;
    margin: 0 auto;
    margin-top: 30px;
    overflow: hidden;
}

form input[type=text] {
    margin-top: 20px;
    width: 263px;
    height: 16px;
    border: 1px solid #b5b5b5;
    border-radius: 24px;
    outline: none;
    padding: 16px 0 16px 25px;
}

input[type=text]:focus {
    border-color: #ed3d3d;
    box-shadow: 0 5px 8px #f36075;
}

input[type=submit] {
    margin-top: 20px;
    width: 288px;
    height: 48px;
    font-size: 16px;
    font-family: "微软雅黑";
    color: #333333;
    border: 1px solid #ed3d3d;
    border-radius: 24px;
    outline: none;
    line-height: 48px;
    text-align: center;
    background: #fff;
}

input[type=submit]:hover {
    background: #ed3d3d;
    color: #fff;
}

a {
    float: right;
    text-decoration: none;
    color: #333;
    font-family: "微软雅黑";
    font-size: 16px;
    margin-top: 12px;
}

.line {
    clear: both;
    width: 414px;
    height: 1px;
    background: #ed3d3d;
    position: relative;
    left: 60px;
    top: 30px;
}

.line span {
    width: 136px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    position: absolute;
    left: 139px;
    bottom: -10px;
    background: #fff;
}

.clearfix:after {
    clear: both;
    content: "";
    display: block;
}

ul {
    width: 524px;
    height: 60px;
    margin: 0 auto;
    margin-top: 88px;
}

ul li {
    float: left;
    width: 60px;
    height: 60px;
    background: #ed3d3d;
    border-radius: 50%;
    margin-left: 86px;
}

li:hover {
    background: #edb53d;
}

接下来要引入JQuery，JS部分代码：

$(function() {
    //拖拽
    dragAndDrop();
    //初始化位置
    initPosition();
    //点击按钮
    clickShowBtn();
})

//拖拽
function dragAndDrop() {
    var move = false; //移动标记
    var x, y; //鼠标距离控件左上角的相对位置
    $('.title').mousedown(function(e) {
        move = true;
        x = e.pageX - parseInt($('.container').css('left'));
        y = e.pageY - parseInt($('.container').css('top'));
        $('.title').fadeTo(20, 0.5); //点击开始拖动并透明显示
    });
    $(document).mousemove(function(e) {
        if(move) {
            var xx = e.pageX - x; //移动鼠标位置计算控件左上角的绝对位置
            var yy = e.pageY - y;
            $('.container').css({
                top: yy,
                left: xx
            }); //控件新位置
        }
    }).mouseup(function() {
        move = false;
        $('.title').fadeTo('fast', 1); //松开鼠标后停止移动并恢复成不透明
    });
}

//初始化拖拽div的位置
function initPosition() {
    //计算初始化位置
    var iTop = ($(document).height() - $('.container').height()) / 2;
    var iLeft = ($(document).width() - $('.container').width()) / 1.8;
    //设置被拖拽div的位置
    $('.container').css({
        top: iTop,
        left: iLeft
    });
}

//点击显示按钮 
function clickShowBtn() {
    $('#show').click(function() {
        $('.container').show(1000);
    });
    $('#hidden').click(function() {
        $('.container').css({"display":'none'});
    });
}

以上有一些细节没有去管，比如说可以拖拽到浏览器内容区外。
只是实现了可拖拽。