jquery窗口拖动 博客分类： 转载 web前端jquery特效拖动窗口

$(function(){ 

   // Start 窗口的拖动
         var _move=false;                 //移动标记
         var _x,_y;
        var $width=$('#outer').width();
        var $height=$('#outer').height(); 
        var $screen=$(document).width();                           
        $(".title").mousedown(function(e){    //鼠标离控件左上角的相对位置
              _move=true;
            _x=e.pageX-parseInt($("#outer").css("left"));
            _y=e.pageY-parseInt($("#outer").css("top"));
            $("#outer").fadeTo(20, 0.5);  //点击后开始拖动并透明显示
          });

          $(document).mousemove(function(e){
                  if(_move){
                            var x=e.pageX-_x;                   //移动时根据鼠标位置计算控件左上角的绝对位置
                            var y=e.pageY-_y;
                            var $side=$width+x+20;
                           if($screen<=$side||x<=0)
                                     _move=false;                          //控制左右边界 
                            else
                                    $("#outer").css({top:y,left:x});      //控件新位置
                   }
           }).mouseup(function(){
                    _move=false;

                    $("#outer").fadeTo("fast", 1);                           //松开鼠标后停止移动并恢复成不透明
           });

  // End 窗口的拖动

});
*******************

<div id="outer">

       <div class="title">标题</div>

</div>