原生js事件 mousedown,mouseup,mousemove结合实现元素拖拽

本文介绍: 拖拽要注意解决鼠标焦点丢失问题鼠标移动过快，会导致鼠标移出盒子，出现盒子和鼠标不同步，且在盒子外鼠标抬起，发现鼠标再次划入盒子，不点击鼠标盒子也仍然还会拖拽。IE/火狐把盒子和鼠标绑在一起调用元素的 setCapture()方法绑定 releaseCapture() 解绑谷歌鼠标不管移动多快都跑不出浏览器所以 mouse m ov e/mouse up 绑定给 window 核心代码<!DOCTYPE html&g t;<html lang=”e n“><head&

拖拽要注意

解决鼠标焦点丢失问题

鼠标移动过快，会导致鼠标移出盒子，出现盒子和鼠标不同步，且在盒子外鼠标抬起，发现鼠标再次划入盒子，不点击鼠标盒子也仍然还会拖拽。

IE/火狐把盒子和鼠标绑在一起调用元素的 setCapture()方法绑定 releaseCapture() 解绑
谷歌鼠标不管移动多快都跑不出浏览器所以 mouse m ov e/mouse up 绑定给 win dow

核心 代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    body {
      position: relative;
      height: 10000px;
    }

    #box {
      position: fixed;
      left: 200px;
      top: 200px;
      width: 100px;
      height: 100px;
      background-color: aqua;
    }
  </style>
</head>

<body>
  <div id="box"></div>
  <script>
    // 解决鼠标焦点丢失问题
    // IE/火狐 把盒子和鼠标绑在一起 调用元素的 setCapture()方法绑定 releaseCapture() 解绑
    // 谷歌 鼠标不管移动多快 都跑不出浏览器 所以 mousemove/mouseup 绑定给 window
    const box = document.querySelector("#box");
    // 获取屏幕宽度
    const HTML = document.documentElement;
    // 最大的 left 和 top
    const maxLeft = HTML.clientWidth - box.offsetWidth;
    const maxTop = HTML.clientHeight - box.offsetHeight;
    // TODO 鼠标按下事件 且不能抬起 才能开始移动 鼠标抬起 停止拖拽
    const down = function down(event) {
      // 获取开始盒子的位置
      const { left, top } = this.getBoundingClientRect();
      // 将需要的数据挂载到对象上
      // 盒子起始的位置
      this.startLeft = left;
      this.startTop = top;
      // 鼠标在盒子上点击时的起始位置
      this.startX = event.clientX;
      this.startY = event.clientY;
      // 鼠标按下 绑定鼠标移动事件
      this._MOVE = move.bind(this)
      this._UP = up.bind(this)
      window.addEventListener("mousemove", this._MOVE);
      window.addEventListener("mouseup", this._UP);
    }
    // 鼠标移动 拖拽盒子事件
    const move = function (event) {
      // 获取盒子当前的 left top
      let curLeft = event.clientX - this.startX + this.startLeft;
      let curTop = event.clientY - this.startY + this.startTop;
      // 边界判断 不能超出当前屏幕
      curLeft = curLeft < 0 ? 0 : curLeft > maxLeft ? maxLeft : curLeft;
      curTop = curTop < 0 ? 0 : curTop > maxTop ? maxTop : curTop;
      // 更新盒子的位置
      this.style.left = curLeft + "px";
      this.style.top = curTop + "px";
    }
    const up = function (event) {
      // 鼠标抬起 取消鼠标移动事件绑定
      window.removeEventListener("mousemove", this._MOVE);
      window.removeEventListener("mouseup", this._UP);
    }
    box.addEventListener("mousedown", down);
  </script>
</body>

</html>