拖拽原理以及代碼實現

拖拽功能主要是用在讓用戶作一些自定義的動做，好比拖動排序，彈出框拖動移動等等；挺好玩兒，和碼友們一塊兒學習！理解有誤或者有更好的建議請提出來哦

下面分享一下拖拽的原理

拖拽流程：

1）事件：onmousedown；onmousemove；onmouseup；

2）實現原理分析：

拖拽是經過獲取鼠標移動的距離來實現的，即計算移動前的位置的座標（x，y）與移動中的位置的座標（x，y）差值。
當onmousedown或onmousemove時，均可以獲取到當前鼠標的位置，即移動前的座標值與移動中的座標值。
參考以下圖：

如上圖所示：

在onmousemove中元素的left值爲 ： 鼠標移動後的left值 - 鼠標按下的left值 + 元素的初始left值；
　　　　　　 top值爲 ： 鼠標移動後的top值 - 鼠標按下的top值 + 元素的初始top值；

須要注意：onmousemove；onmouseup事件要在onmousedown事件內；

代碼以下：

 1  function drag(id,Range){
 2  var _this=this;
 3  if (Range==void(0))Range=document;
 4  var obox=document.getElementById(id);
 5  obox.onmousedown=function(e){
 6  fndown(e,this,Range);
 7  //兼容IE事件捕獲點下以後進行獲取事件；setcapture事件捕獲和releaseCapture釋放事件捕獲要成對出現使用；用於解決IE不能阻止默認事件問題；
 8  //當進行拖拽的時候圖片也會有默認事件；用一樣的方法進行阻止默認事件；
 9  if (this.setcapture) {
10  this.setcapture()
11  }
12  return false;
13  
14  
15  }
16  },
17  
18  /*******************************
19  當鼠標按下後obj的left和top值設置爲鼠標的X軸和Y軸；
20  當進行拖動時設置元素的left值和top值實現拖拽
21  
22  ************************************************/
23  function  fndown(e,obj,Range){
24  if(Range!=document) Range=document.getElementById(Range);
25  var e=e||window.event;
26  this.ledt=e.clientX-obj.offsetLeft;
27  this.ledr=e.clientY-obj.offsetTop;
28  Range.onmousemove=function(e){
29  var rangeW=Range==document?document.documentElement.clientWidth:fan.offsetWidth;
30  var rangeH=Range==document?document.documentElement.clientHeight:fan.offsetHeight
31  var e=e||window.event;
32  var ollL=e.clientX-this.ledt;
33  var ollR=e.clientY-this.ledt;
34  if(ollL<0)ollL=0;
35  if(ollL>rangeW-obj.offsetWidth){
36  ollL=parseInt(rangeW-obj.offsetWidth);
37  }
38 if(ollR<0)ollR=0;
39  if(ollR>rangeH-obj.offsetHeight){
40  ollR=parseInt(rangeH-obj.offsetHeight);
41  }
42  obj.style.left=ollL+'px';
43  obj.style.top=ollR+'px';
44  }.bind(this);
45  Range.onmouseup=function(){
46  this.onmousemove=this.onmouseup=null;
47  
48  //當鼠標擡起以後釋放事件捕獲
49  if (obj.releaseCapture) {
50  obj.releaseCapture()
51  }
52 
53 };
54  }