jQuery div拖拽效果詳解

admin發表於2017-10-21
jQuery

下面分享一個效果的詳細過程，它實現了利用滑鼠可以在指定區域隨意拖拽div塊的功能

程式碼如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
.drag {
  position:absolute;
  background:#0000CC;
  top:100px;
  left:200px;
  padding:0;
  width:100px;
  height:100px;
}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){ 
  var move=false;
  var _x,_y;
  $(".drag").mousedown(function(e){ 
    move=true; 
    _x=e.pageX-parseInt($(".drag").css("left")); 
    _y=e.pageY-parseInt($(".drag").css("top")); 
  }); 
  $(document).mousemove(function(e){ 
    if(move){ 
      var x=e.pageX-_x;//控制元件左上角到螢幕左上角的相對位置 
      var y=e.pageY-_y; 
      $(".drag").css({"top":y,"left":x}); 
    } 
  }).mouseup(function(){ 
    move=false; 
  }); 
})
</script>
</head>
<body>
<div class="drag"></div>
</body>
</html>

上面實現了拖拽效果，下面就介紹一下此效果的實現過程。

一.程式碼註釋:

（1）.$(document).ready(function(){ })，當穩當結構完全載入完畢再去函式中的程式碼。

（2）.var move=false，宣告一個變數並賦初值為false，用來標識div是否可以拖動，為true標識可以拖動。

（3）.var _x,_y，宣告兩個變數，用來儲存滑鼠指標在div中按下的位置距離div左邊緣和上邊緣的距離。

（4）.$(".drag").mousedown(function(e){})，為div註冊mousedown事件處理函式。

（5）.move=true，將move設定為true，這說明div是可以拖動的。

（6）._x=e.pageX-parseInt($(".drag").css("left"))，獲取滑鼠指標距離div左側的距離。

（7）._y=e.pageY-parseInt($(".drag").css("top"))，獲取滑鼠指標距離div上冊的距離。

（8）.$(document).mousemove(function(e){})，為document文件註冊mousemove事件處理函式，之所以註冊在document，而不是div是利用了事件冒泡顯現，以防止滑鼠劃出div導致拖動失效現象。

（9）.if(move)，判斷是否可以拖動。

（10）.var x=e.pageX-_x，取得div的left屬性值。

（11）.var y=e.pageY-_y，取得div的top屬性值。

（12）.$(".drag").css({"top":y,"left":x})，設定left和top屬性值。

（13）.mouseup(function(){ move=false; })，註冊mouseup事件處理函式，也就是滑鼠鬆開，將moe的值設定為false。

二.相關閱讀:

（1）.mousedown事件參閱jQuery mousedown事件一章節。 

（2）.e.pageX屬性參閱jQuery event.pageX屬性一章節。 

（3）.parseInt方法參閱JavaScript parseInt()一章節。

（4）.css方法參閱jQuery css()一章節。 

（5）.mousemove事件參閱jQuery mousemove事件一章節。 

（6）.mouseup事件參閱jQuery mouseup事件一章節。 

相關文章