JavaScript 拖動調整元素尺寸

admin發表於2019-01-31
JavaScript

分享一段程式碼例項，它利用js實現了拖動調整矩形大小的功能。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
#ant {
  width: 200px;
  height: 200px;
  background-color: #71e4ff;
  position: absolute;
  left: 200px;
  top: 200px;
}
.t {
  width: 100%;
  height: 20px;
  background-color: #ffa2d3;
  position: absolute;
  left: 0;
  top: 0;
}
.r {
  width: 20px;
  height: 100%;
  background-color: #ffa2d3;
  position: absolute;
  right: 0;
  top: 0;
}
.b {
  width: 100%;
  height: 20px;
  background-color: #ffa2d3;
  position: absolute;
  left: 0;
  bottom: 0;
}
.l {
  width: 20px;
  height: 100%;
  background-color: #ffa2d3;
  position: absolute;
  left: 0;
  top: 0;
}
.lt {
  width: 20px;
  height: 20px;
  background-color: #93ff6b;
  position: absolute;
  left: 0;
  top: 0;
}
.lb {
  width: 20px;
  height: 20px;
  background-color: #93ff6b;
  position: absolute;
  left: 0;
  bottom: 0;
}
.rt {
  width: 20px;
  height: 20px;
  background-color: #93ff6b;
  position: absolute;
  right: 0;
  top: 0;
}
.rb {
  width: 20px;
  height: 20px;
  background-color: #93ff6b;
  position: absolute;
  right: 0;
  bottom: 0;
}
</style>
<script>
window.onload = function() {
  var oBox = document.getElementById("ant");
  var aDiv = oBox.getElementsByTagName("div");

  for (var i = 0; i < aDiv.length; i++) {
    drag(aDiv[i]);
  }

  function drag(obj) {
    obj.onmousedown = function(ev) {
      var oEvent = ev || event;
      oPreW = oBox.offsetWidth;
      oPreH = oBox.offsetHeight;
      oPreL = oBox.offsetLeft;
      oPreT = oBox.offsetTop;
      oPreX = oEvent.clientX;
      oPreY = oEvent.clientY;

      document.onmousemove = function(ev) {
        var oEvent = ev || event;
        if (obj.className.indexOf("t") != -1) {
          var oChaY = oPreY - oEvent.clientY;
          oBox.style.height = oPreH + oChaY + "px";
          oBox.style.top = oPreT - oChaY + "px";
        }
        if (obj.className.indexOf("r") != -1) {
          var oChaX = oEvent.clientX - oPreX;
          oBox.style.width = oPreW + oChaX + "px";
        }
  
        if (obj.className.indexOf("b") != -1) {
          var oChaY = oEvent.clientY - oPreY;
          oBox.style.height = oPreH + oChaY + "px";
        }
        if (obj.className.indexOf("l") != -1) {
          var oChaX = oPreX - oEvent.clientX;
          oBox.style.width = oPreW + oChaX + "px";
          oBox.style.left = oPreL - oChaX + "px";
        }
      };

      document.onmouseup = function() {
        document.onmousemove = null;
        document.onmouseup = null;
      };
      return false;
    };
  }
};
</script>
</head>
<body>
  <div id="ant">
    <div class="t"></div>
    <div class="r"></div>
    <div class="b"></div>
    <div class="l"></div>
    <div class="lt"></div>
    <div class="lb"></div>
    <div class="rt"></div>
    <div class="rb"></div>
  </div>
</body>
</html>

上面的程式碼實現預期效果，下面介紹一下它的實現過程。

一.程式碼註釋:

[CSS] 純文字檢視 複製程式碼
#ant {
  width: 200px;
  height: 200px;
  background-color: #71e4ff;
  position: absolute;
  left: 200px;
  top: 200px;
}

要被通過拖動調整尺寸的div元素。

採用絕對定位，所以如果它的子元素採用定位，那麼位移參考物件就是它。

[CSS] 純文字檢視 複製程式碼
.t {
  width: 100%;
  height: 20px;
  background-color: #ffa2d3;
  position: absolute;
  left: 0;
  top: 0;
}

為了便於記憶，t是top的縮寫，也就是頂部粉色部分。

採用絕對定位，定位參考物件是它的父元素。

[CSS] 純文字檢視 複製程式碼
.lt {
  width: 20px;
  height: 20px;
  background-color: #93ff6b;
  position: absolute;
  left: 0;
  top: 0;
}

為了便於記憶，lt是leftButton縮寫。

[JavaScript] 純文字檢視 複製程式碼
window.onload = function() {
  // code
}

當文件內容完全載入完畢之後，再去執行函式中的程式碼。

var oBox = document.getElementById("ant")，獲取指定id屬性值的元素物件。

var aDiv = oBox.getElementsByTagName("div")，獲取div元素集合。

[JavaScript] 純文字檢視 複製程式碼
for (var i = 0; i < aDiv.length; i++) {
    drag(aDiv[i]);
  }

遍歷div元素集合中的每一個元素，並將其作為引數傳遞給函式drag。

[JavaScript] 純文字檢視 複製程式碼
obj.onmousedown = function(ev) {
  //code
}

為div元素註冊mousedown事件處理函式。

var oEvent = ev || event，獲取事件物件，這裡採用相容低版本IE瀏覽器的寫法。

[JavaScript] 純文字檢視 複製程式碼
oPreW = oBox.offsetWidth;
oPreH = oBox.offsetHeight;

獲取要被拖動元素的寬度和高度。

[JavaScript] 純文字檢視 複製程式碼
oPreL = oBox.offsetLeft;
oPreT = oBox.offsetTop;

獲取要被拖動元素距離body左邊緣和上邊緣的尺寸。

[JavaScript] 純文字檢視 複製程式碼
oPreX = oEvent.clientX;
oPreY = oEvent.clientY;

獲取當滑鼠按下時，滑鼠指標在瀏覽器客戶區的座標。

[JavaScript] 純文字檢視 複製程式碼
document.onmousemove = function(ev) {
  // code
}

為document註冊mousemove事件處理函式。

之所以註冊到document元素，而不是按鈕div上，是利用事件冒泡，防止滑鼠滑出按鈕div，導致失效。

var oEvent = ev || event，獲取事件物件，這裡採用相容低版本IE瀏覽器的寫法。

if (obj.className.indexOf("t") != -1)，判斷滑鼠下時，指標所在的元素是否是按鈕div。

var oChaY = oPreY - oEvent.clientY，獲取拖動原來滑鼠座標與拖動時滑鼠座標的差，也就是拖動的距離。

oBox.style.height = oPreH + oChaY + "px"，獲取拖動後的高度。

oBox.style.top = oPreT - oChaY + "px"，拖動後高度發生變化，所以調整top值，保持位置固定。

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

當滑鼠鬆開後，解綁事件處理函式。

二.相關閱讀:

（1）.document.getElementById()參閱document.getElementById()一章節。

（2）.getElementsByTagName()參閱JavaScript getElementsByTagName()一章節。

（3）.mousedown事件參閱JavaScript mousedown 事件一章節。

（4）.offsetWidth參閱JavaScript offsetWidth一章節

（5）.offsetHeight參閱JavaScript offsetHeight一章節。

（6）.offsetLeft參閱JavaScript offsetLeft一章節。

（7）.offsetTop參閱JavaScript offsetTop一章節。

（8）.clientX參閱JavaScript event.clientX一章節。

（9）.clientY參閱JavaScript event.clientY一章節。

（10）.mousemove參閱JavaScript mousemove 事件一章節。

（11）.className參閱JavaScript className 屬性一章節。

（12）.indexOf參閱JavaScript string indexOf()一章節。

（13）.mouseup參閱JavaScript mouseup 事件一章節。

相關文章