js實現的div拖動效果例項程式碼

antzone發表於2017-03-15
JS

div的拖動效果在很多效果中都有應用，當然還有很多附加的功能，本章節只是給拖動效果，並介紹一下它的實現過程。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>div拖動效果-螞蟻部落</title> 
<style type="text/css">
#oDiv
{
  position:absolute;
  width:100px;
  height:60px;
  border:1px solid silver;
  left:100px;
  top:100px;
  z-index:9999;
}
#move
{
  cursor:move;
  width:100%;
  height:15px;
  background-color:#0066cc; 
  font-size:10px;
}
#close
{
  float:right; 
  width:10px; 
  height:100%; 
  cursor:hand; 
  background-color:#cc3333; 
  color:White;
  font-size:15px;
}
</style>
<script type='text/javascript'> 
var offset_x; 
var offset_y; 
function Milan_StartMove(oEvent,div_id) 
{ 
  var whichButton; 
  if(document.all&&oEvent.button==1)
  {
    whichButton=true; 
  } 
  else 
  { 
    if(oEvent.button==0)
      whichButton=true;
  } 
  if(whichButton) 
  { 
    offset_x=parseInt(oEvent.clientX-oDiv.offsetLeft); 
    offset_y=parseInt(oEvent.clientY-oDiv.offsetTop); 
    document.documentElement.onmousemove=function(mEvent) 
    { 
      var eEvent=mEvent||event;
      var oDiv=div_id; 
      var x=eEvent.clientX-offset_x; 
      var y=eEvent.clientY-offset_y; 
      oDiv.style.left=(x)+"px"; 
      oDiv.style.top=(y)+"px"; 
    } 
  } 
} 
function Milan_StopMove(oEvent)
{
  document.documentElement.onmousemove=null; 
} 
function div_Close(o) {o.style.display="none";} 
window.onload=function()
{
  var omove=document.getElementById("move");
  var oclose=document.getElementById("close");
  omove.onmousedown=function(){Milan_StartMove(event,this.parentNode)}
  omove.onmouseup=function(){Milan_StopMove(event)}
  oclose.onclick=function(){div_Close(this.parentNode.parentNode)}
}
</script> 
</head> 
<body> 
<div id="oDiv"> 
  <div id="move"> 
    <div id="close">X</div> 
  </div> 
</div> 
</body> 
</html>

以上程式碼實現了div的拖動效果，下面簡單介紹一下此效果的實現過程:

一.實現原理:

實現的原理非常的簡單，就是將被拖動的div設定為絕對定位，然後根據滑鼠指標的座標不斷設定div的left和top屬性值即可，當然在此過程中需要用到一些事件或者具體座標的計算，這裡就不介紹了，可以參閱程式碼註釋。

二.程式碼註釋:

1.var offset_x,宣告一個變數用來儲存滑鼠指標距離div左邊緣的距離。

2.var offset_y,宣告一個變數用來儲存滑鼠指標距離div上邊緣的距離。

3.function Milan_StartMove(oEvent,div_id){}，此函式為move元素的onclick事件處理函式，第一個引數是事件物件，第二個是move元素的父元素。

4.var whichButton，宣告一個變數，用來儲存一個布林值。

5.if(document.all&&oEvent.button==1){}，如果在IE8和IE一下瀏覽器中，且event的button屬性值為1，if(document.all)可用來是否是IE8和IE8以下瀏覽器，如果button屬性值等於1，那麼就是點選的滑鼠左鍵。

6.whichButton=true，將變數的值設定為true。

7.if(oEvent.button==0)，在其他瀏覽器中，如果button屬性值為0。

8.if(whichButton){}，如果whichButton為true，也就是滑鼠左鍵被按下。

9.offset_x=parseInt(oEvent.clientX-oDiv.offsetLeft)，獲取滑鼠指標座標距離oDiv元素左邊緣的距離。

10.offset_y=parseInt(oEvent.clientY-oDiv.offsetTop)，獲取滑鼠指標座標距離oDiv元素上邊緣的距離。

11.document.documentElement.onmousemove=function(mEvent){}，為document物件註冊onmousemove事件處理函式，之所以註冊到document物件上，是利用了事件冒泡原理，否則有可能滑鼠指標滑出div，導致拖動失效的現象。

12. var eEvent=mEvent||event，事件物件的相容性寫法。

13.var oDiv=div_id，將物件的引用賦值給oDiv變數。

14.var x=eEvent.clientX-offset_x，獲取被拖動div的左邊緣距離視窗的距離。

15.var y=eEvent.clientY-offset_y，獲取被拖動div的上邊緣距離視窗的距離。

16.oDiv.style.left=(x)+"px"，設定left屬性值。

17.oDiv.style.top=(y)+"px",設定top屬性值。

18.function Milan_StopMove(oEvent){document.documentElement.onmousemove=null;}  ，鬆開滑鼠左鍵時的事件處理函式。

19.function div_Close(o){o.style.display="none";} ，點選叉號時的事件處理函式。

三.相關閱讀:

1.Event.button屬性可以參閱javascript button屬性一章節。

2.document.all可以參閱document.all用法詳解一章節。 

3.parseInt()函式可以參閱javascript parseInt()一章節。 

4.clientX和clientY屬性可以參閱javascript clientX一章節。 

5.offsetLeft和offsetTop屬性可以參閱offsetLeft、clientLeft和scrollLeft一章節。

6.onmousemove事件可以參閱javascript mousemove 事件一章節。

7.var eEvent=mEvent||event可以參閱var ev=window.event||ev的作用是什麼一章節。 

8.onmousedown事件參閱javascript mousedown 事件一章節。 

9.onmouseup事件可以參閱javascript mouseup 事件一章節。

10.onclick事件可以參閱javascript click 事件一章節。  

11.事件冒泡可以參閱javascript事件冒泡簡單介紹一章節。  

相關文章