js帶有虛線框的拖動效果代碼實例

分享一段代碼實例,它實現了元素拖動效果。

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

代碼實例如下:

[HTML] 純文本查看 複製代碼運行代碼
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<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,並解綁事件處理函數。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章