可拖拽窗口

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

<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'});    });}

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