如何使用jQuery防止可移动div超出页面/屏幕范围

当前代码未限制Div的移动范围，导致每次按键直接增减位置时会超出屏幕边界。要解决这个问题，需在计算新位置前先判断是否在屏幕合法范围内，仅允许Div在边界内移动。

实现思路 #

• 获取可视区域的宽高：通过$(window).width()和$(window).height()获取屏幕可用范围
• 获取Div自身的宽高：提前获取$('#divResult').width()和$('#divResult').height()，避免重复计算
• 边界校验：
  • 左边界：新left值不能小于0
  • 右边界：新left值不能超过「屏幕宽度 - Div宽度」
  • 上边界：新top值不能小于0
  • 下边界：新top值不能超过「屏幕高度 - Div高度」

修改后的完整代码 #

JavaScript 代码

$(document).ready(() => {
  const $div = $('#divResult');
  // 提前获取Div的宽高，提升性能
  const divWidth = $div.width();
  const divHeight = $div.height();

  $(document).on('keydown', function(e) {
    e.preventDefault(); // 阻止箭头键触发页面滚动
    const windowWidth = $(window).width();
    const windowHeight = $(window).height();
    // 获取当前位置（转为数字类型）
    let currentLeft = parseInt($div.css('left'), 10);
    let currentTop = parseInt($div.css('top'), 10);
    let newLeft = currentLeft;
    let newTop = currentTop;

    // 根据按键计算新位置
    switch(e.which) {
      case 37: // 左箭头
        newLeft = currentLeft - 50;
        break;
      case 38: // 上箭头
        newTop = currentTop - 50;
        break;
      case 39: // 右箭头
        newLeft = currentLeft + 50;
        break;
      case 40: // 下箭头
        newTop = currentTop + 50;
        break;
    }

    // 限制新位置在合法范围内
    newLeft = Math.max(0, Math.min(newLeft, windowWidth - divWidth));
    newTop = Math.max(0, Math.min(newTop, windowHeight - divHeight));

    // 执行移动动画
    $div.animate({
      left: newLeft,
      top: newTop
    });
  });
});

HTML 代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
#divResult {
  position: absolute; /* 必须设置绝对定位，left/top属性才生效 */
  width: 100px;
  height: 100px;
  background-color: #ccc;
  left: 0;
  top: 0;
}
</style>
<div id="divResult"></div>

关键注意点 #

• 必须给Div设置position: absolute或fixed，否则left/top属性无法控制位置
• 使用Math.max()和Math.min()可以简洁地完成边界限制，避免复杂的if判断
• 添加e.preventDefault()是为了防止按下箭头键时触发页面滚动，影响移动体验

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