跳至主要內容

JS拖拽功能的实现

yyshino大约 2 分钟

JS拖拽功能的实现

首先是三个事件，分别是 mousedown，mousemove，mouseup 当鼠标点击按下的时候，需要一个 tag 标识此时已经按下，可以执行 mousemove 里面的 具体方法。 clientX，clientY 标识的是鼠标的坐标，分别标识横坐标和纵坐标，并且我们用 offsetX 和 offsetY 来表示元素的元素的初始坐标，

移动的举例应该是： 鼠标移动时候的坐标-鼠标按下去时候的坐标。 也就是说定位信息为： 鼠标移动时候的坐标-鼠标按下去时候的坐标+元素初始情况下的 offetLeft. 还有一点也是原理性的东西，也就是拖拽的同时是绝对定位，我们改变的是绝对定位条件下的 left 以及 top 等等值。

补充：也可以通过 html5 的拖放（Drag)

代码实现

    思路：
 
    鼠标按下时，纪录一下鼠标位置距离移动元素的边的距离。
 
    鼠标移动时，实时更新元素位置（具体计算以垂直方向为例：
 
        鼠标距离浏览器垂直方向距离，减去刚刚纪录的鼠标距离元素的垂直方向距离，
 
        就是元素定位top属性的值）
 
    鼠标松开时，完成元素位移。


<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>Document</title>

  <style>
    div {
      width: 300px;
      height: 200px;
      background-color: pink;
      position: fixed;
      top: 0;
      left: 0;
    }
  </style>
</head>

<body>
  <div></div>


  <script>
    var divEle = document.getElementsByTagName('div')[0]
    console.log(divEle);
    var mouse = {
      mouseLock: false,
      mouseEleClient: {
        t: 0,
        l: 0
      }
    }

    divEle.onmousedown = function (e) { // 当鼠标在divEle按下时触发事件
      e = e || window.event;
      var l = e.clientX;
      var t = e.clientY;

      mouse.mouseEleClient.t = t - this.offsetTop; // 横坐标
      mouse.mouseEleClient.l = l - this.offsetLeft; // 纵坐标
      mouse.mouseLock = true;
    }

    divEle.onmouseup = function (e) { // 鼠标松开触发
      mouse.mouseLock = false;
    }

    window.onmousemove = function (e) { // 当鼠标移动时持续触发
      if (mouse.mouseLock) {
        e = e || window.event;
        var l = e.clientX;
        var t = e.clientY;

        var divT = t - mouse.mouseEleClient.t;
        var divL = l - mouse.mouseEleClient.l
        divEle.style.top = divT + 'px'
        divEle.style.left = divL + 'px'
      }
    }


  </script>
</body>

</html>

参考

js拖拽功能的实现__牛客网 (nowcoder.com)open in new window