jQuerydiv元素拖動效果程式碼例項

antzone發表於2017-04-04
jQuery

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

程式碼非常的簡單，有這方面需求的朋友可以做一下參考。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
#Drigging {
  width:200px;
  background:#CCC;
  border:solid 1px #666;
  height:80px;
  line-height:80px;
  text-align:center;
  position:absolute;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(function(){ 
  var bool=false;
  var offsetX=0;
  var offsetY=0;
  $("#Drigging").mouseover(function(){
    $(this).css('cursor','move');
  })
  $("#Drigging").mousedown(function(event){ 
    bool=true;
    offsetX = event.offsetX;
    offsetY = event.offsetY;
    $(this).css('cursor','move');
  }).mouseup(function(){
    bool=false;
  })
  $(document).mousemove(function(event){
    if(!bool)
      return;
    var x = event.clientX-offsetX;
    var y = event.clientY-offsetY;
    $("#Drigging").css("left", x);
    $("#Drigging").css("top", y);
    $("#Drigging").css('cursor','move');
  })
})
</script>
</head>
<body>
  <div id="Drigging" style="float:left"></div>
</body>
</html>

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

一.程式碼註釋:

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

（2）.var bool=false，設定一個識別符號，用來說明元素是否可以拖動。

（3）.var offsetX=0，宣告一個變數並賦值為0，用法後面介紹。

（4）.var offsetY=0，同上。

（5）.$("#Drigging").mouseover(function(){

  $(this).css('cursor','move');

})，為元素註冊mouseover事件處理函式，當滑鼠懸浮的時候滑鼠指標程式設計帶有四個箭頭的那種形狀。

（6）.$("#Drigging").mousedown(function(){ 

  bool=true;

  offsetX = event.offsetX;

  offsetY = event.offsetY;

  $(this).css('cursor','move');

})，為元素註冊mousedown事件處理函式，也就是當滑鼠在元素中按下的時候觸發。

bool=true，將bool的值設定為true，也就是元素可以拖動。

（7）.offsetX = event.offsetX，獲取事件觸發時候滑鼠指標在元素中的橫座標。

（8）.offsetY = event.offsetY，和上面同理，獲取縱向座標。

（9）.$(this).css('cursor','move')，設定滑鼠指標為帶有四個箭頭的那種形狀。

（10）..mouseup(function(){

  bool=false;

})，註冊mouseup事件處理函式，也就是當滑鼠案件鬆開的時候，將bool設定為false，也就是不可拖動。

（11）.$(document).mousemove(function(){})，為document物件註冊mousemove事件處理函式。

（12）.if(!bool) return，如果bool為false，那麼直接跳出函式，也就是不可以拖動。

（13）.var x = event.clientX-offsetX，獲取元素左邊緣距離瀏覽器客戶區左邊緣的尺寸。

（14）.var y = event.clientY-offsetY,後去元素上邊緣距離瀏覽器客戶區上邊緣的尺寸。

（15）.$("#Drigging").css("left", x);

    $("#Drigging").css("top", y);

    $("#Drigging").css('cursor','move');

設定相關的樣式，因為是絕對定位，所以就實現了拖動效果。

二.相關閱讀:

（1）.mouseover事件可以參閱jQuery mouseover 事件一章節。

（2）.css()方法可以參閱jQuery css()一章節。

（3）.mousedown事件可以參閱jQuery mousedown 事件一章節。

（4）.mouseup事件可以參閱jQuery mouseup 事件一章節。

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

（6）.clientX可以參閱javascript clientX一章節。

（7）.offsetX屬性可以參閱javascript offsetX一章節。

相關文章