天天看點

Jquery 拖動視窗

Jquery 拖動視窗的最簡寫法

$(function(){  

   // Start 視窗的拖動

         var _move=false;                 //移動标記 

         var _x,_y;                            //滑鼠離控件左上角的相對位置 

        $(".title").mousedown(function(e){ 

                     _move=true; 

                     _x=e.pageX-parseInt($(".zf_Box").css("left")); 

                     _y=e.pageY-parseInt($(".zf_Box").css("top")); 

                    $(".zf_Box").fadeTo(20, 0.5);                          //點選後開始拖動并透明顯示 

          }); 

          $(document).mousemove(function(e){ 

                  if(_move){ 

                            var x=e.pageX-_x;                                  //移動時根據滑鼠位置計算控件左上角的絕對位置 

                            var y=e.pageY-_y; 

                            $(".zf_Box").css({top:y,left:x});               //控件新位置 

                   } 

           }).mouseup(function(){ 

                    _move=false; 

                    $(".zf_Box").fadeTo("fast", 1);                           //松開滑鼠後停止移動并恢複成不透明 

           }); 

  // End 視窗的拖動

});