如何为可拖动地图图片设置屏幕移动边界？

要解决地图拖动时露出空白背景的问题，我们需要计算地图元素的可移动范围，确保其始终覆盖整个窗口。核心思路是限制元素的top和left值，使其边缘触碰到窗口边缘时停止移动。

修改后的JavaScript代码 #

document.addEventListener('DOMContentLoaded', function() {
  let x = 0;
  let y = 0;
  let eleWidth, eleHeight, windowWidth, windowHeight;
  let minLeft, maxLeft, minTop, maxTop;

  const ele = document.getElementById('dragMe');

  const mouseDownHandler = function(e) {
    x = e.clientX;
    y = e.clientY;
    // 获取元素和窗口尺寸，计算边界值
    eleWidth = ele.offsetWidth;
    eleHeight = ele.offsetHeight;
    windowWidth = window.innerWidth;
    windowHeight = window.innerHeight;
    // 计算left的有效范围：最小为窗口宽度减元素宽度，最大为0
    minLeft = windowWidth - eleWidth;
    maxLeft = 0;
    // 计算top的有效范围：最小为窗口高度减元素高度，最大为0
    minTop = windowHeight - eleHeight;
    maxTop = 0;

    document.addEventListener('mousemove', mouseMoveHandler);
    document.addEventListener('mouseup', mouseUpHandler);
  };

  const mouseMoveHandler = function(e) {
    const dx = e.clientX - x;
    const dy = e.clientY - y;

    // 计算新的位置
    let newTop = ele.offsetTop + dy;
    let newLeft = ele.offsetLeft + dx;

    // 限制位置在有效范围内
    newTop = Math.max(Math.min(newTop, maxTop), minTop);
    newLeft = Math.max(Math.min(newLeft, maxLeft), minLeft);

    // 更新元素位置
    ele.style.top = `${newTop}px`;
    ele.style.left = `${newLeft}px`;

    x = e.clientX;
    y = e.clientY;
  };

  const mouseUpHandler = function() {
    document.removeEventListener('mousemove', mouseMoveHandler);
    document.removeEventListener('mouseup', mouseUpHandler);
  };

  ele.addEventListener('mousedown', mouseDownHandler);
});

代码说明 #

• 边界计算：在鼠标按下时获取元素和窗口的尺寸，计算出left和top的有效范围。minLeft确保元素右边缘不超出窗口右边界，maxLeft确保元素左边缘不超出窗口左边界；minTop和maxTop同理处理垂直方向。
• 位置限制：每次移动时计算新位置，通过Math.max和Math.min将位置值钳制在有效范围内，避免元素移出窗口导致空白。
• 动态尺寸获取：在鼠标按下时获取尺寸，确保如果元素（或窗口）尺寸发生变化（比如图片加载完成后），边界值能实时更新。

保留的CSS和HTML代码 #

CSS

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  height: 100vh;
  width: 100vw;
  overflow-x: hidden;
  overflow-y: hidden;
}

img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
}

.container {
  align-items: center;
  display: flex;
  justify-content: center;
  height: 100%;
  width: 100%;
  border: 1px solid #cbd5e0;
}

.draggable {
  cursor: pointer;
  position: absolute;
  user-select: none;
  align-items: center;
  display: flex;
  justify-content: center;
  border: 1px solid #cbd5e0;
}

HTML

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

<head>
  <link rel="stylesheet" href="css.css">
  <script type="text/javascript" src="javascript.js"></script>
</head>

<body>
  <div class="container">
    <div class="draggable" id="dragMe">
      <img src="Texture/test map.png">
    </div>
  </div>
</body>

</html>

内容的提问来源于stack exchange，提问作者system detector