JavaScript拖動div元素詳解

admin發表於2017-10-30
JavaScript

本章節分享一段程式碼例項，實現了div元素的基本拖動效果。

下面就詳細介紹一下它的實現過程，需要的朋友可以做一下參考。

程式碼例項:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#antzone{
  position:absolute;
  width:150px;
  height:150px;
  background-color:green;
}
</style>
<script type="text/javascript">
function drag(obj){
  if(typeof obj=="string"){
    var obj = document.getElementById(obj);
    obj.orig_index=obj.style.zIndex;
  }
  obj.onmousedown=function(ev){
    this.style.cursor="move";
    this.style.zIndex=1000;
    var ev=window.event||ev;
 
    var x=ev.clientX-obj.offsetLeft+(document.documentElement.scrollLeft||document.body.scrollLeft);
    var y=ev.clientY-obj.offsetTop+(document.documentElement.scrollTop||document.body.scrollTop);
 
    document.onmousemove=function(ev){
      var ev=window.event||ev;
      obj.style.left=(ev.clientX-x+document.documentElement.scrollLeft||document.body.scrollLeft)+"px";
      obj.style.top=(ev.clientY-y+document.documentElement.scrollTop||document.body.scrollTop)+"px";
    }
 
    document.onmouseup=function (){
      document.onmousemove=null;
      document.onmouseup = null;
      obj.style.cursor="normal";
      obj.style.zIndex=obj.orig_index;
    }
  } 
}
window.onload=function(){
  drag("antzone");
}
</script>
</head>
<body>
<div id="antzone"></div>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.function drag(obj){}，此函式實現了元素的拖動效果，引數是要拖動元素的id屬性值。

（2）.if(typeof obj=="string"){

  var obj = document.getElementById(obj);

  obj.orig_index=obj.style.zIndex;

}，判斷引數是否為字串。

如果是則獲取元素物件。

並且把元素的z-index屬性值賦值給元素物件新增屬性orig_index。

（3）.obj.onmousedown=function(ev){}，為元素物件註冊onmousedown事件處理函式，引數是事件物件。

（4）.this.style.cursor="move",設定滑鼠指標的樣式，也就是當滑鼠按下的時候滑鼠指標變成四個箭頭形式。

（5）.this.style.zIndex=1000，設定d元素z-index屬性值為1000，這裡就是將z-index設定為一個很大的值，讓它在其他元素之上。

（6）.var ev=window.event||ev，實現事件物件的瀏覽器相容。

（7）.var x=ev.clientX-obj.offsetLeft+(document.documentElement.scrollLeft||document.body.scrollLeft)，獲取滑鼠按下時候，滑鼠指標距離元素左側的距離。

（8）.var y=ev.clientY-obj.offsetTop+(document.documentElement.scrollTop||document.body.scrollTop)，獲取滑鼠按下時候，滑鼠指標距離元素頂部的距離。

（9）.document.onmousemove=function(ev){}，為文件註冊onmousemove事件處理函式。

（10）.obj.style.left=(ev.clientX-x+document.documentElement.scrollLeft||document.body.scrollLeft)+"px",設定元素的left屬性值。

（11）.obj.style.top=(ev.clientY-y+document.documentElement.scrollTop||document.body.scrollTop)+"px"，設定元素的top屬性值。

（12）.document.onmouseup=function (){

  document.onmousemove=null;

  document.onmouseup = null;

  obj.style.cursor="normal";

  obj.style.zIndex=obj.orig_index;

},當滑鼠鬆開的時候，解綁世界處理函式，並且還原滑鼠的指標形狀和元素的z-index值。

二.相關閱讀:

（1）.typeof參閱JavaScript typeof一章節。

（2）.var ev=window.event||ev參閱var ev=window.event||ev的作用是什麼一章節。

（3）.clientX參閱JavaScript clientX一章節。

（4）.offsetLeft參閱JavaScript offsetLeft一章節。

（5）.document.documentElement.scrollLeft||document.body.scrollLeft參閱document.documentElement.scrollTop瀏覽器相容一章節。

（6）.mousemove參閱JavaScript mousemove事件一章節。

相關文章