js物件導向封裝拖動效果程式碼例項

admin發表於2017-04-15
JS物件封裝

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

並且採用物件導向的方式對程式碼進行了封裝，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
.box {
  width:100px;
  height:100px;
  background: red;
  position: absolute;
  top:0;
  left: 0;
}
</style>
<script>
function Drag(ele) {
  this.ele = ele;
}
Drag.prototype = {
  fndown: function(event) {
    var _this = this;
    this.disP = {
      x: event.clientX - this.ele.offsetLeft,
      y: event.clientY - this.ele.offsetTop
    };
    document.onmousemove = function(ev) {
      ev = ev || window.event;
      _this.fnmove(ev);
    };
    document.onmouseup = function() {
      _this.fnup();
    }
  },
  fnmove: function(event) {
    this.move = {
      x: event.clientX - this.disP.x,
      y: event.clientY - this.disP.y
    };
    this.ele.style.left = this.move.x + 'px';
    this.ele.style.top = this.move.y + 'px';
  },
 
  fnup: function() {
    document.onmousemove = null;
    document.onmouseup = null;
  },
  init: function() {
    var self = this;
    self.ele.onmousedown = function(event) {
      event = event || window.event;
      self.fndown(event);
      return false;
    }
  }
};
window.onload = function() {
  var box = document.querySelector('#box'),
    drag = new Drag(box);
  drag.init();
};
</script>
</head>
<body>
<div id="box" class="box"></div>
</body>
</html>

上面的程式碼實現了拖動封裝，下面介紹一下它的實現過程。

一.程式碼註釋:

[JavaScript] 純文字檢視 複製程式碼
function Drag(ele) {
  this.ele = ele;
}

函式在js中可以用作類的角色，也就是可以用new呼叫。

ele引數是一個元素物件。

es6中新增類的概念，具體可以參閱ES2015 Class類一章節。

[JavaScript] 純文字檢視 複製程式碼
Drag.prototype = {
  //code
}

通過原型為類的物件例項新增屬性後者方法。

[JavaScript] 純文字檢視 複製程式碼
fndown: function(event) {
  var _this = this;
  this.disP = {
    x: event.clientX - this.ele.offsetLeft,
    y: event.clientY - this.ele.offsetTop
  };
  document.onmousemove = function(ev) {
    ev = ev || window.event;
    _this.fnmove(ev);
  };
  document.onmouseup = function() {
    _this.fnup();
  }
}

此函式會在onmousedown事件觸發時候呼叫。

even引數是事件物件，會在onmousedown事件處理方法中為其傳遞。

var _this = this，this是指向當前方法被呼叫的物件，將其傳遞給_this，是為了防止衝突，因為在其內部的其他方法中，this就不一定再執行fndown的呼叫物件了。this.disP中儲存的是滑鼠按鍵按下時候，滑鼠指標所在位置距離div元素左邊緣和上邊緣的距離。

document.onmousemove = function(ev){}註冊onmousemove事件處理函式，也就是說只當滑鼠按下之後，才能有拖動效果，之所以註冊在document上，而不是直接註冊在div元素本身之上，是利用事件冒泡現象，防止滑鼠滑出div元素，導致拖動無效的現象。

document.onmouseup註冊onmouseup事件處理函式，也就是滑鼠按鍵鬆開時會觸發此事件。

[JavaScript] 純文字檢視 複製程式碼
fnmove: function(event) {
  this.move = {
    x: event.clientX - this.disP.x,
    y: event.clientY - this.disP.y
  };
  this.ele.style.left = this.move.x + 'px';
  this.ele.style.top = this.move.y + 'px';
}

此方法會在onmousemove事件觸發的時候呼叫，能夠使元素隨著滑鼠指標的移動而移動，也就實現了拖動效果。

this.move儲存的是元素距離容器左側和上冊的距離；左後將其設定為left和top屬性值即可實現拖動。

[JavaScript] 純文字檢視 複製程式碼
fnup: function() {
  document.onmousemove = null;
  document.onmouseup = null;
}

解綁對應的事件處理函式。

[JavaScript] 純文字檢視 複製程式碼
init: function() {
  var self = this;
  self.ele.onmousedown = function(event) {
    event = event || window.event;
    self.fndown(event);
  }
}

此方法具有初始化功能。

相關閱讀:

（1）.prototype屬性可以參閱javascript prototype原型一章節。

（2）.this用法可以參閱javascript this一章節。

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

（4）.offsetLeft可以參閱offsetleft一章節。

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

（7）.onmouseup可以參閱javascript mouseup事件一章節。

（8）.document.querySelector()可以參閱document.querySelector()一章節。

相關文章