jquery div層拖動效果封裝

antzone發表於2017-04-09
jQuery封裝

本章節分享一段程式碼例項，它實現了對div層的拖動功能的封裝效果。

並且點選div元素能夠使當前div元素位於最頂端，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
div{
  width:200px;
  height:200px;
  background-color:#3399cc;
  box-shadow:5px 5px 20px #999999;
  -webkit-user-select:none;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
(function ($) {
  var myDrag = function (options) {
    var isDown = false;
    var offset;
    var $this = $(this);
    $this.css({ position: "absolute" });
    $this.css({ left: $this.offset().left });
    $this.css({ top: $this.offset().top });
 
    function onMouseDown(e) {
      isDown = true;
      offset = { x: e.screenX, y: e.screenY };
    }
 
    function onMouseMove(e) {
      if (!isDown) return;
      options.onDrag && options.onDrag.call($this);
      var dX = e.screenX - offset.x;
      var dY = e.screenY - offset.y;
      offset = { x: e.screenX, y: e.screenY };
      $(this).css("left", parseInt($(this).css("left")) + dX);
      $(this).css("top", parseInt($(this).css("top")) + dY);
    }
 
    function onMouseUp() {
      if (!isDown) return;
      isDown = false;
      offset = undefined;
    }
 
    $(document).on({
      mouseup: onMouseUp
    });
 
    $this.on({
      mousedown: onMouseDown,
      mousemove: onMouseMove
    })
  };
 
  $.fn.myDrag = function (options) {
    this.each(function () {
      myDrag.call(this, options);
    });
  };
})(jQuery);
$(document).ready(function () {
  var color = ["#ff00ff", "#3399cc", "#99cc33"];
  var $div = $("div");
  $div.each(function () {
    $(this).css("backgroundColor", color[~~(Math.random() * color.length)])
  });
  $div.myDrag({
    onDrag: function () {
      this.css("z-index", 9).siblings().css("z-index", 1);
    }
  });
}) 
</script>
</head>
<body>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</body>
</html>

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

一.程式碼註釋:

（1）.(function ($) {})(jQuery),一個匿名自治性函式，這樣可以防止內部變數對外部變數的汙染，這裡同樣也可以實現內部使用$（假如外部已經禁止使用$）.

（2）.var myDrag = function (options) {},此函式封裝了拖動功能，引數下面通過使用會介紹到。

（3）.var isDown = false，宣告一個變數並賦值為false，作為一個標識，用來說明滑鼠是否按下，也就是div是否可以拖動。

（4）.var offset，儲存作用用的，下面會介紹到。

（5）.var $this = $(this)，轉換為jQuery物件並賦值給變數$this，這樣可以避免每次使用都要獲取的效能消耗。

（6）.$this.css({ position: "absolute" })，設定當前元素為絕對定位。

（7）.$this.css({ left: $this.offset().left })，設定元素的left屬性值。

（8）.$this.css({ top: $this.offset().top })，設定元素的top屬性值。

（9）.function onMouseDown(e) {

  isDown = true;

  offset = { x: e.screenX, y: e.screenY };

}，這個作為mousedown事件處理函式。

也就是當滑鼠按下以後，isDown設定為true，也就是表示可以拖動。

offset賦值為當前滑鼠指標在螢幕中的座標。

（10）.function onMouseMove(e) {

  if (!isDown) return;

  options.onDrag && options.onDrag.call($this);

  var dX = e.screenX - offset.x;

  var dY = e.screenY - offset.y;

  offset = { x: e.screenX, y: e.screenY };

  $(this).css("left", parseInt($(this).css("left")) + dX);

  $(this).css("top", parseInt($(this).css("top")) + dY);

}，此方法作為mousemove事件處理函式。

如果isDown不為true，也就是滑鼠沒有按下，那麼就不能拖動，直接返回。

options.onDrag && options.onDrag.call($this)，判斷是否存在onDrag，如果存在那麼就呼叫此方法，功能是設定元素的z-index屬性值，實現了當前元素處於最上層的效果。

var dX = e.screenX - offset.x，獲取滑鼠的指標位移。

offset = { x: e.screenX, y: e.screenY }，重新設定offset，更新座標。

$(this).css("left", parseInt($(this).css("left")) + dX)，重新設定元素的left屬性值。

（11）.function onMouseUp() {

  if (!isDown) return;

    isDown = false;

    offset = undefined;

}作為mouseup事件處理函式。

如果isDown不等於true，也就是說本身就沒有按下，直接退出。

否則將isDown設定為true，offset值清空。

（12）.$this.on({

  mousedown: onMouseDown,

  mousemove: onMouseMove

}),註冊事件處理函式。

（13）.$.fn.myDrag = function (options) {

  this.each(function () {

    myDrag.call(this, options);

  });

}，為jquery物件新增新增一個myDray()方法。

此方法能夠為jQuery物件例項集合中的每一個元素呼叫一次myDrag()方法。

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

（15）.var color = ["#ff00ff", "#3399cc", "#99cc33"]，建立一個顏色陣列。

（16）.var $div = $("div")，獲取div元素集合。

（17）.$div.each(function () {

  $(this).css("backgroundColor", color[~~(Math.random() * color.length)])

})，設定div元素的背景色，~~運算子可以參閱相關閱讀。

（18）.$div.myDrag({

  onDrag: function () {

    this.css("z-index", 9).siblings().css("z-index", 1);

  }

})，呼叫此函式，執行一些初始化操作，比如註冊事件處理函式等。

二.相關閱讀:

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

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

（3）.screenX可以參閱javascript screenX一章節。

（4）.call()可以參閱js call()一章節。

（5）.parseInt()方法可以參閱javascript parseInt()一章節。

（6）.~~運算子可以參閱javascript按位非~運算子一章節。

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

（8）.siblings()方法可以參閱siblings()方法一章節。

相關文章