人人人妻人人人妻人人人,99精品国产综合久久久久五月天 ,欧美白人最猛性XXXXX,日韩AV无码免费播放


News新聞

業(yè)界新聞動態(tài)、技術(shù)前沿
Who are we?

您的位置：首頁      網(wǎng)站知識      jQuery拖拽div實現(xiàn)

jQuery拖拽div實現(xiàn)

標簽： 發(fā)布日期：2014-02-19 00:00:00 2465

思路是利用jquery的mousemove，mousedown，mouseup三個事件，定義兩個相對位置，分別是

1、組件左上角與屏幕左上角的相對位置

2、鼠標所在坐標與組件左上角的相對位置。

具體函數(shù)如下：

 

css" style="font-family: Consolas, 'Courier New', Courier, mono, serif; background-color: rgb(231, 229, 220); width: 936.53125px; overflow: auto; padding-top: 1px; color: rgb(0, 0, 0); line-height: 26px; margin: 18px 0px !important;">
  1. .drag{  
  2.        position:absolute;         
  3.        background:#0000CC;        
  4.        top:100px;left:200px;  
  5.        padding:0;  
  6.        }  


 

 

 

[javascript] view plaincopy在CODE上查看代碼片派生到我的代碼片
 
  1. $(document).ready(function(){    
  2. var move=false;//移動標記    
  3. var _x,_y;//鼠標離控件左上角的相對位置    
  4.     $(".drag").mousedown(function(e){    
  5.         move=true;    
  6.         _x=e.pageX-parseInt($(".drag").css("left"));    
  7.         _y=e.pageY-parseInt($(".drag").css("top"));         
  8.     });    
  9.     $(document).mousemove(function(e){    
  10.         if(move){    
  11.             var x=e.pageX-_x;//控件左上角到屏幕左上角的相對位置  
  12.             var y=e.pageY-_y;    
  13.             $(".drag").css({"top":y,"left":x});   
  14.         }    
  15.     }).mouseup(function(){    
  16.     move=false;        
  17.   });  

其中e.pageX,e.pageY為當前鼠標的橫縱坐標。

 

大家自己動手試一下，思路就更加清晰了~