JavaScript 拖拽限定範圍

admin發表於2019-10-05

所謂拖拽就是通過滑鼠或者觸屏拖動元素改變原有位置。
在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事件一章節。

相關文章