JavaScript有虛線框的拖動

admin發表於2017-04-16
原文網址 : https://www.softwhy.com/article-7312-1.html
JavaScript

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

在拖動的時候具有一個虛線框在移動，當鬆開滑鼠虛線框消失，原來的元素會被放置於此。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
* {
  padding: 0;
  margin: 0;
}
#box1 {
  width: 100px;
  height: 100px;
  text-align:center;
  line-height:100px;
  background: yellow;
  position: absolute;
  cursor: move;
}
#box2 {
  width: 100px;
  height: 100px;
  border: 1px dashed #000000;
  position: absolute;
  cursor: move;
}
</style>
<script>
window.onload = function() {
  var box1 = document.getElementById("box1");
  box1.onmousedown = function(event) {
    var e = event || window.event;
    var disX = e.clientX - box1.offsetLeft;
    var disY = e.clientY - box1.offsetTop;
    var maxL = document.documentElement.clientWidth - box1.offsetWidth;
    var maxT = document.documentElement.clientHeight - box1.offsetHeight;
    //建立一個新的div
    var box2 = document.createElement("div");
    box2.id = "box2";
    box2.style.left = box1.offsetLeft + "px";
    box2.style.top = box1.offsetTop + "px";
    document.documentElement.appendChild(box2);
    document.onmousemove = function (event) {
      var e = event || window.event;
      var l = e.clientX - disX;
      var t = e.clientY - disY;
      if (l <= 0) {
        l = 0;
      }
      if (t <= 0) {
        t = 0;
      }
      if (l >= maxL) {
        l = maxL;
      }
      if (t >= maxT) {
        t = maxT
      }
      box2.style.left = l + "px";
      box2.style.top = t + "px";
    };
    box2.onmouseup = function() {
      box1.style.left = box2.style.left;
      box1.style.top = box2.style.top;
      document.documentElement.removeChild(box2);
      box2.onmousemove = null;
      box2.onmouseup = null;
    };
  }
}
</script>
</head>
<body>
<div id="box1">螞蟻部落</div>
</body>
</html>

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

一.程式碼註釋:

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

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

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

（4）.var e = event || window.event，相容所有瀏覽器的時間物件。

（5）.var disX = e.clientX - box1.offsetLeft，獲取當前滑鼠指標距離元素左側的距離。

（6）.var disY = e.clientY - box1.offsetTop，獲取當前滑鼠指標距離元素上側的距離。（7）.var maxL = document.documentElement.clientWidth - box1.offsetWidth，元素可以向右拖動的最大值。

（8）.var maxT = document.documentElement.clientHeight - box1.offsetHeight，元素可以向上拖動的最大值。

（9）.var box2 = document.createElement("div")，建立虛線框div元素。

（10）. box2.id = "box2"，設定虛線框div元素的id屬性值。

（11）.box2.style.left = box1.offsetLeft + "px"，設定box2元素的left屬性值

（12）.box2.style.top = box1.offsetTop + "px"，設定box2的top屬性值。

（13）. document.documentElement.appendChild(box2)，將此box2新增的頁面。

（14）.document.onmousemove = function (event) {

  var e = event || window.event;

  var l = e.clientX - disX;

  var t = e.clientY - disY;

  if (l <= 0) {

    l = 0;

  }

  if (t <= 0) {

    t = 0;

  }

  if (l >= maxL) {

    l = maxL;

  }

  if (t >= maxT) {

    t = maxT

  }

  box2.style.left = l + "px";

  box2.style.top = t + "px";

}，將box2元素的可以拖動範圍限定在瀏覽器客戶區。

之所以將onmousemove 事件處理函式註冊在document上是為了防止快速拖動導致滑鼠脫離元素，失去拖動效果。

（15）.box2.onmouseup = function() {

  box1.style.left = box2.style.left;

  box1.style.top = box2.style.top;

  document.documentElement.removeChild(box2);

  box2.onmousemove = null;

  box2.onmouseup = null;

},當滑鼠鬆開的時候，將box1的位置設定為當前box2的位置。

然後刪除box2，並解綁事件處理函式。

二.相關閱讀:

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

（2）.onmousedown事件可以參閱JavaScript mousedown事件一章節。

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

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

（5）.clientWidth可以參閱clientWidth一章節。

（6）.offsetWidth可以參閱js offsetWidth一章節。

（7）.document.createElement()可以參閱document.createElement()一章節。

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

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

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

（11）.removeChild()可以參閱javascript removeChild()一章節。

相關文章