可拖動的div

****win爲div的idcss

$("#win").mousedown(function(e)//e鼠標事件 
         { 
             $(this).css("cursor","move");//改變鼠標指針的形狀 
              
             var offset = $(this).offset();//DIV在頁面的位置 
             var x = e.pageX - offset.left;//得到鼠標指針離DIV元素左邊界的距離 
             var y = e.pageY - offset.top;//得到鼠標指針離DIV元素上邊界的距離 
             $(document).bind("mousemove",function(ev)//綁定鼠標的移動事件,由於光標在DIV元素外面也要有效果,因此要用doucment的事件,而不用DIV元素的事件 
             { 
                 $("#win").stop();//加上這個以後 
                  
                 var _x = ev.pageX - x;//得到X軸方向移動的值 
                 var _y = ev.pageY - y;//得到Y軸方向移動的值 
                  
                 $("#win").animate({left:_x+"px",top:_y+"px"},10); 
             }); 
              
         }); 
          
         $(document).mouseup(function() 
         { 
             $("#win").css("cursor","default"); 
             $(this).unbind("mousemove"); 
         }) this

相關文章
相關標籤/搜索