JavaScript 拖拽限定範圍

admin發表於2019-10-05
JavaScript

所謂拖拽就是通過滑鼠或者觸屏拖動元素改變原有位置。
在HTML5之前同樣可以實現拖拽效果，主要通過如下幾個事件實現：
（1）.mousedown事件。
（2）.mousemove事件。
（3）.mouseup事件。
下面是一段簡單的拖拽效果程式碼例項，並對其進行詳細分析。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
* {
  margin: 0;
  padding: 0;
}
#box {
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  height: 100px;
  background: #f60;
}
</style>
<script type="text/javascript">
window.onload = function () {
  var oBox = document.getElementById('box');
  oBox.onmousedown = function (e) {
    var oEvent = e || window.event,
      disL = oEvent.clientX - oBox.offsetLeft,
      disT = oEvent.clientY - oBox.offsetTop,
      maxL = document.documentElement.clientWidth - oBox.offsetWidth,
      maxT = document.documentElement.clientHeight - oBox.offsetHeight;
  
    document.onmousemove = function (e) {
      var oEvent = e || window.event,
        disX = oEvent.clientX - disL,
        disY = oEvent.clientY - disT;
  
      //console.log(disX);
      if (disX <= 0) { disX = 0 }
      if (disY <= 0) { disY = 0 }
      if (disX >= maxL) { disX = maxL }
      if (disY >= maxT) { disY = maxT }
      oBox.style.left = disX + 'px';
      oBox.style.top = disY + 'px';
    }
  
  }
  document.onmouseup = function () {
    document.onmousemove = null;
  }
}
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>

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

一.程式碼註釋:

（1）.window.onload = function () {}，當文件內容完全載入完畢再去執行函式中的程式碼。

（2）.var oBox = document.getElementById('box')，獲取id屬性值為box的元素物件。

（3）.oBox.onmousedown = function (e) {}，為元素註冊onmousedown註冊事件處理函式。

（4）.var oEvent = e || window.event，實現事件物件的相容效果。

（5）.disL = oEvent.clientX - oBox.offsetLeft，滑鼠在客戶區的座標減去OBox距離body左側的距離，其實也就是獲取滑鼠距離OBox元素左側的距離。（6）.maxL = document.documentElement.clientWidth - oBox.offsetWidth，獲取OBox元素的最大left值。

（7）.document.onmousemove = function (e) {}，註冊onmousemove事件處理函式，之所以註冊document上，是利用了事件冒泡效果，同時也防止了滑鼠移出OBox元素，導致拖動失效現象。

（8）.disX = oEvent.clientX - disL,獲取OBox元素的left值。

（9）.disY = oEvent.clientY - disT，獲取OBox元素的top值。

（10）.if (disX <= 0) { disX = 0 }

  if (disY <= 0) { disY = 0 }

  if (disX >= maxL) { disX = maxL }

  if (disY >= maxT) { disY = maxT }

上面的程式碼實現了拖動範圍限定效果。

（11）.document.onmouseup = function () {

document.onmousemove = null;

}，當鬆開滑鼠按鍵的時候，解綁onmousemove事件處理函式。

二.相關閱讀：

（1）.var oEvent = e || window.event參閱var ev=window.event||ev 一章節。

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

（3）.offsetLeft參閱JavaScript offsetleft一章節。

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

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

相關文章