js带有虚线框的拖动效果代码实例_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>