js带有虚线框的拖动效果代码实例

最新推荐文章于 2022-07-15 11:02:26 发布

翻译最新推荐文章于 2022-07-15 11:02:26 发布 · 1.5k 阅读

前端js 同时被 2 个专栏收录

39 篇文章

订阅专栏

效果

13 篇文章

订阅专栏

本文提供了一段HTML和JavaScript代码，用于实现一个简单的拖动效果。该效果包括一个跟随鼠标移动的虚线框，当鼠标按钮释放时，虚线框消失，原始元素则被放置在虚线框最后的位置。

分享一段代码实例，它实现了元素拖动效果。

在拖动的时候具有一个虚线框在移动，当松开鼠标虚线框消失，原来的元素会被放置于此。

代码实例如下:

[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>