前端面试题：用 mouse 事件写一个可拖曳的 div，考虑了浏览器边界情况

最新推荐文章于 2023-04-27 18:04:03 发布

擦拉嘿

最新推荐文章于 2023-04-27 18:04:03 发布

阅读量321

点赞数

分类专栏：前端JS面试题文章标签： javascript

本文链接：https://blog.csdn.net/weixin_42655717/article/details/117884299

版权

前端JS面试题专栏收录该内容

3 篇文章 0 订阅

订阅专栏

思路第一层：先搞定基础的代码设定，再来考虑边界的问题。

总体框架应该是鼠标按下，鼠标移动，松鼠标。

先上html代码，带一个有border，有padding，有背景颜色的div盒子

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>JS Bin</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 100px;
            height: 100px;
            position: absolute;
            left: 0;
            top: 0;
            padding: 10px;
            background-color: yellow;
            border: 5px solid red;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <script src="./script.js"></script>
</body>

</html>

再上最基础功能的js代码：

const boxElement = document.querySelector(".box");
const params = { isDragging: false };

boxElement.onmousedown = function (e) {
  params.isDragging = true;
};

document.onmousemove = function (e) {};

document.onmouseup = function (e) {
  params.isDragging = false;
};

上面为什么不像在mousedown一样，沿用boxElement，而是在document.eventName 这种形式，稍后就明白了。先卖个关子，不过此处，你先用boxElement 也不是不行，

思路第二层：想清楚边距的关系，当鼠标按下时，还是暂不考虑边界的问题。

在这里插入图片描述

const boxElement = document.querySelector(".box");
const params = {
  isDragging: false,
  lengthTillLeftEdge: 0,
  lengthTillTopEdge: 0,
  boxHeight: boxElement.offsetHeight,
  boxWidth: boxElement.offsetWidth,
  boxRangeX: 0,
  boxRangeY: 0,
};

boxElement.onmousedown = function (e) {
  params.isDragging = true;
  // 2 号深绿色线所示的距离，就是鼠标的位置（e.clientX）， 到div盒子左侧边框的距离，
  // 关于offsetLeft这个参见下面的链接
  params.lengthTillLeftEdge = e.clientX - boxElement.offsetLeft;
  // 3 号深蓝色线所示的距离，
  params.lengthTillTopEdge = e.clientY - boxElement.offsetTop;
  // 水平方向 box 的css属性，left 可设置的最大的值，因为再多就出去了，
  params.boxRangeX = document.body.clientWidth - params.boxWidth;
  // 垂直方向 box 的css属性，top 可设置的最大的值，因为再多就出去了，
  // 因为body我们没有设定高度，所以这里用window来获取页面高度
  config.boxRangeY = window.innerHeight - config.boxHeight;
};

document.onmousemove = function (e) {};

document.onmouseup = function (e) {
  params.isDragging = false;
};

思路第三层：当鼠标开始move时，确定好边界。

const boxElement = document.querySelector(".box");
const params = {
  isDragging: false,
  lengthTillLeftEdge: 0,
  lengthTillTopEdge: 0,
  boxHeight: boxElement.offsetHeight,
  boxWidth: boxElement.offsetWidth,
  boxRangeX: 0,
  boxRangeY: 0,
};

boxElement.onmousedown = function (e) {
  params.isDragging = true;
  // 2 号深绿色线所示的距离，就是鼠标的位置（e.clientX）， 到div盒子左侧边框的距离，关于offsetLeft这个参见下面的链接
  params.lengthTillLeftEdge = e.clientX - boxElement.offsetLeft;
  // 3 号深蓝色线所示的距离，
  params.lengthTillTopEdge = e.clientY - boxElement.offsetTop;
  // 水平方向 box 的css属性，left 可设置的最大的值，因为再多就出去了，
  params.boxRangeX = document.body.clientWidth - params.boxWidth;
  // 垂直方向 box 的css属性，top 可设置的最大的值，因为再多就出去了，
  // 因为body我们没有设定高度，所以这里用window来获取页面高度
  config.boxRangeY = window.innerHeight - config.boxHeight;
};

document.onmousemove = function (e) {
  if (params.dragging) {
    // shiftX, shiftY 分别是代表左右偏移的最终距离
    let shiftX, shiftY;
    // e.clientX - params.lengthTillLeftEdge 就是图中 1线 - 2线的距离
    if (e.clientX - params.lengthTillLeftEdge > params.boxRangeX) {
      shiftX = params.boxRangeX;
    } else {
      // 同上看当div往左侧移动时，确保不会从左侧边界溜出去。
      shiftX = e.clientX - params.lengthTillLeftEdge < 0 ? 0 : e.clientX - params.lengthTillLeftEdge;
    }
    // e.clientX - params.lengthTillLeftEdge 就是图中 4线 - 3线的距离
    if (e.clientY - params.lengthTillTopEdge > params.boxRangeY) {
      shiftY = params.boxRangeY;
    } else {
      // 同上看当div往顶侧移动时，确保不会从顶侧边界溜出去。
      shiftY = e.clientY - params.lengthTillTopEdge < 0 ? 0 : e.clientY - params.lengthTillTopEdge;
    }
    // 确定完偏移量之后，进行最终的设定
    boxElement.style.left = shiftX + "px";
    boxElement.style.top = shiftY + "px";
  }
};

document.onmouseup = function (e) {
  params.isDragging = false;
};

现在来说一下为什么在 move 和 onmouseup 添加到document上，因为在拖动的时候，可能因为拖动的比较快，鼠标脱离了div 盒子，或者即使在盒子里面时，拖动速度过快，div盒子没跟上，那么如果把move事件绑定在box上，那么就会出问题，event会终止，并且 mouseup 也不能正常运行，但是如果我们绑定到document上，就没有什么影响了，即使拖动没跟上也无所谓，move 和 mouseup都能正常运行。

在这里插入图片描述
到现在位置，就完成了，能够保证边界的问题也能够解决，不会让div 出去。

参考资料：
HTML 获取屏幕、浏览器、页面的高度宽度
 Element.clientHeight
Understanding offsetWidth, clientWidth, scrollWidth and -Height, respectively
How to find the width of a div using vanilla JavaScript?
clientX vs pageX vs screenX vs offsetX
How to create draggable html element using javascript

擦拉嘿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端面试题：用 mouse 事件写一个可拖曳的 div，考虑了浏览器边界情况

思路第一层：先搞定基础的代码设定，再来考虑边界的问题。总体框架应该是鼠标按下，鼠标移动，松鼠标。先上html代码，带一个有border，有padding，有背景颜色的div盒子<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>JS Bin</title> <style> * { m
复制链接

扫一扫