JavaScript 限制移动范围：防止子级 div 超出父级 div

本文提供一个 JavaScript 函数，用于限制子级 div 在放大后移动的范围，防止其超出父级 div 的边界。函数通过计算子级与父级宽高差，在鼠标拖动过程中动态调整子级 div 的位置，确保其始终在父级范围内。

function limitMove(childDiv, parentDiv) {
  var childWidth = childDiv.offsetWidth;
  var childHeight = childDiv.offsetHeight;
  var parentWidth = parentDiv.offsetWidth;
  var parentHeight = parentDiv.offsetHeight;
  var maxX = parentWidth - childWidth;
  var maxY = parentHeight - childHeight;

  childDiv.addEventListener('mousedown', function(e) {
    var disX = e.clientX - childDiv.offsetLeft;
    var disY = e.clientY - childDiv.offsetTop;

    document.addEventListener('mousemove', move);
    document.addEventListener('mouseup', function() {
      document.removeEventListener('mousemove', move);
    });

    function move(e) {
      var left = e.clientX - disX;
      var top = e.clientY - disY;

      if (left < 0) {
        left = 0;
      } else if (left > maxX) {
        left = maxX;
      }

      if (top < 0) {
        top = 0;
      } else if (top > maxY) {
        top = maxY;
      }

      childDiv.style.left = left + 'px';
      childDiv.style.top = top + 'px';
    }
  });
}

该函数接受两个参数：子级 div 和父级 div 的 DOM 元素。首先，它计算子级 div 和父级 div 的宽度和高度差。然后，在鼠标拖动子级 div 时，它限制 left 和 top 值在父级 div 的范围内。具体来说，如果子级 div 的 left 或 top 值小于 0，则限制其值为 0；如果它的 left 或 top 值大于父级 div 的宽度或高度差，则限制其值为父级 div 的宽度或高度差。这样就可以保证子级 div 不会移动到超出父级 div 的范围。

使用方法：

将上述代码添加到您的 HTML 文件中。
使用以下代码调用 limitMove() 函数：

// 获取子级和父级 div 元素
var childDiv = document.getElementById('childDiv');
var parentDiv = document.getElementById('parentDiv');

// 调用 limitMove() 函数
limitMove(childDiv, parentDiv);

注意：

子级 div 的 position 属性必须设置为 absolute 或 relative，才能使用 left 和 top 属性进行定位。
父级 div 的 position 属性可以设置为 relative 或 static。

通过使用 limitMove() 函数，您可以轻松地限制子级 div 在放大后移动的范围，确保其始终在父级 div 的边界内。