JavaScript拖動滑鼠繪製矩形方框

antzone發表於2018-05-31
JavaScript

本章節分享一段程式碼例項，它實現了拖動滑鼠實現繪製方框效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#rectBox{
  background:#CCFFFF;
  border:2px solid #0099FF;
  filter:alpha(opacity=30);
  opacity:0.3;
  position:absolute;
}
</style>
<script type="text/javascript">
function Rect(){
  this.doc = document.documentElement;
  if(!this.doc) return;
  this.startX = '';
  this.startY = '';
  rectSelf = this;
}
Rect.prototype.down = function(e){
  var e = e?e:window.event;
  rectSelf.startX = e.pageX?e.pageX:e.clientX + document.documentElement.scrollLeft || document.body.scrollLeft;
  rectSelf.startY = e.pageY?e.pageY:e.clientY + document.documentElement.scrollTop+document.body.scrollTop;
  rectSelf.showRect(true);
}
Rect.prototype.up = function(e){
  rectSelf.rectBox.style.width = '0px';
  rectSelf.rectBox.style.height = '0px';
  rectSelf.showRect(false);
}
Rect.prototype.move = function(e){
  if(rectSelf.rectBox){
    var currentX = e.pageX?e.pageX:e.clientX + document.documentElement.scrollLeft;
    var currentY = e.pageY?e.pageY:e.clientY + document.documentElement.scrollTop;
    rectSelf.rectBox.style.width = Math.abs(currentX - rectSelf.startX) + 'px';
    rectSelf.rectBox.style.height = Math.abs(currentY - rectSelf.startY) + 'px';
    if(currentX - rectSelf.startX < 0){
      rectSelf.rectBox.style.left = currentX + 'px';
    }
    if(currentY - rectSelf.startY < 0){
      rectSelf.rectBox.style.top = currentY + 'px';
    }
  }
}
Rect.prototype.showRect = function(bool){
  if(bool){
    if(!this.rectBox){
      this.rectBox = document.createElement("div");
      this.rectBox.id = "rectBox";
      document.body.appendChild(this.rectBox);
    }
    this.rectBox.style.display = "block";
    this.rectBox.style.left = this.startX + 'px';
    this.rectBox.style.top = this.startY + 'px'; 
    this.addEventListener(this.doc , 'mousemove' , this.move);
  }
  else{
    if(this.rectBox){
      this.rectBox.style.display = "none";
    }
    this.removeEventListener(this.doc , 'mousemove' , this.move);
  }
}
Rect.prototype.addEventListener = function(o,e,l){
  if(o.addEventListener){
    o.addEventListener(e,l,false);
  } 
  else if (o.attachEvent) {
    o.attachEvent('on'+e,function() {
      l(window.event);
    });
  }
}
Rect.prototype.removeEventListener = function(o,e,l){
  if (o.removeEventListener) {
    o.removeEventListener(e,l,false);
  } 
  else if (o.detachEvent) {
    o.detachEvent('on'+e,function() {
      l(window.event);
    });
  }
}
window.onload = function(){
  var oRect = new Rect();
  oRect.addEventListener(oRect.doc , 'mousedown' , oRect.down);
  oRect.addEventListener(oRect.doc , 'mouseup' , oRect.up);
}
</script>
</head>
<body>
<h1>拖動滑鼠測試效果</h1>
</body>
</html>

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

一.程式碼註釋:

（1）.function Rect(){}，定義一個建構函式。

（2）.this.doc = document.documentElement，將document.documentElement賦值給this.doc。

（3）.if(!this.doc) return，如果不存在，那麼就直接跳出。

（4）.this.startX = '',宣告一個變數，它用來儲存拖動開始的滑鼠橫向座標。

（5）.this.startY = '',宣告一個變數，它用來儲存推動開始的滑鼠縱向座標。

（6）.rectSelf = this，將this賦值給變數。

（7）.Rect.prototype.down = function(e){}，這個就是mousedown事件處理函式。

（8）.var e = e?e:window.event,獲取相容所有瀏覽器的事件物件。

（9）.rectSelf.startX = e.pageX?e.pageX:e.clientX + document.body.scrollLeft,獲取滑鼠指標在文件中的水平座標，這裡是採用了相容性的寫法，因為低版本IE瀏覽器並不支援e.pageX。

（10）.rectSelf.startY = e.pageY?e.pageY:e.clientY + document.body.scrollTop，獲取滑鼠指標在文件中的垂直座標，原理同上。

（11）.rectSelf.showRect(true)，此方法用來開始對繪製做一些基本工作，引數是一個布林值，用來表示要進行繪製還是結束繪製。

（12）.Rect.prototype.up = function(e){}，mouseup事件處理函式。

（13）.rectSelf.rectBox.style.width = '0px',設定矩形div的寬度為0。

（14）.rectSelf.rectBox.style.height = '0px',設定矩形div的高度為0。

（15）.rectSelf.showRect(false),取消繪製，也就是矩形元素消失。

（16）.Rect.prototype.move = function(e){}，mousemove時間處理函式。

（17）.if(rectSelf.rectBox){}，如果矩形div元素已經建立。

（18）.var currentX = e.pageX?e.pageX:e.clientX + document.body.scrollLeft,獲取滑鼠當前在文件中的橫向座標。（19）.var currentY = e.pageY?e.pageY:e.clientY + document.body.scrollTop,獲取滑鼠當前在文件中的縱向座標。

（20）.rectSelf.rectBox.style.width = Math.abs(currentX - rectSelf.startX) + 'px',設定矩形的寬度，之所以用絕對值方法，是因為現在還不清楚currentX和rectSelf.startX的大小。

（21）.rectSelf.rectBox.style.height = Math.abs(currentY - rectSelf.startY) + 'px',設定矩形的高度，和上面同樣道理。

（22）.if(currentX - rectSelf.startX < 0){

  rectSelf.rectBox.style.left = currentX + 'px';

},如果小於0，也就是向左拖動，就設定元素的left值為當前滑鼠的橫向座標。

（22）.if(currentY - rectSelf.startY < 0){

  rectSelf.rectBox.style.top = currentY + 'px';

}，和上面是同樣的道理。

（23）.Rect.prototype.showRect = function(bool){}，此方法可以進行建立的準備工作,引數是一個布林值，如果為true表示將要建立，然後進行準備工作，否則就要取消已經建立的div矩形元素。

（24）.if(bool){

  if(!this.rectBox){

    this.rectBox = document.createElement("div");

    this.rectBox.id = "rectBox";

    document.body.appendChild(this.rectBox);

  }

    this.rectBox.style.display = "block";

    this.rectBox.style.left = this.startX + 'px';

    this.rectBox.style.top = this.startY + 'px'; 

    this.addEventListener(this.doc , 'mousemove' , this.move);

  }，建立div元素，並且附加到body中

然胡設定元素的left和top值，然後註冊mousemove事件處理函式。

二.相關閱讀:

（1）.建構函式可以參閱javascript建構函式一章節。

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

（3）.e.pageX參閱jQuery event.pageX一章節。

（4）.e.clientX參閱javascript clientX一章節。

（5）.Math.abs()參閱javascript Math.abs()一章節。

（6）.document.createElement()參閱document.createElement()一章節。

（7）.appendChild()參閱js appendChild()一章節。

（8）.prototype參閱javascript prototype原型一章節。

（9）.addEventListener()參閱javascript addEventListener()一章節。

（10）.attachEvent()參閱javascript attachEvent()一章節。

（11）.removeEventListener()參閱removeEventListener()方法和detachEvent()方法用法一章節。

相關文章