JS实现拖拽移动元素

本文最后更新于：2023年8月7日 凌晨

实现的效果如图

录制_2020_11_23_20_10_35_670

实现步骤：

  • 鼠标按下时进入拖拽状态onmousedown
  • 鼠标移动时，如果是拖拽状态，则元素跟随移动onmousemove
  • 鼠标弹起或鼠标离开元素范围时退出拖拽状态onmouseup和onmouseleave

如何跟随移动？计算两个鼠标指针的距离差，然后应用到目标元素上

需要注意的是（我没做的）：

  • 若是对鼠标点击有要求，需要判断是否为左键
  • 若是对移动范围有要求，需要做相应处理禁止移动
  • 若是对性能有要求，记得做防抖处理

简单的实现拖拽代码如下：

1
2
3
4
5
6
7
8
9
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
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>拖拽移动元素</title>
  <style>
    #tools {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      height: 100px;
      width: 100px;
      background-color: cadetblue;
      cursor: move;
    }
  </style>
</head>
    
<body>
  <div id="tools"></div>
  <script>
    let start = null;   // 鼠标位置记录
    let isDrag = false; // 拖拽状态
    const tools = document.getElementById("tools");
    // 鼠标按下的时候记录初始鼠标位置
    tools.onmousedown = function (e) {
      start = {
        x: e.x,
        y: e.y,
      };
      isDrag = true;
    }
    // 鼠标抬起时结束拖拽
    tools.onmouseup = function (e) {
      isDrag = false;
    }
    // 鼠标移出目标元素范围自动结束拖拽
    tools.onmouseleave = function (e) {
      isDrag = false;
    }
    // 鼠标移动时移动目标元素
    tools.onmousemove = function (e) {
      if (isDrag) {
        // 计算两次鼠标的位置差
        let distance = {
          x: e.x - start.x,
          y: e.y - start.y,
        }
        // 移动目标元素
        tools.style.left = tools.offsetLeft + distance.x + 'px';
        tools.style.top = tools.offsetTop + distance.y + 'px';
        // 保存本次鼠标位置
        start.x = e.x;
        start.y = e.y;
      }
    }
  </script>
</body>
</html>
前端
#Javascript
JS实现拖拽移动元素
https://chanx.tech/2020/7410f8b3a3b6/
作者
ischanx
发布于
2020年11月23日
更新于
2023年8月7日
许可协议