浏览器垂直调整大小时如何保证可拖拽div始终处于可视区域

DevOps 小满

2026-10-4

问题原因

当前代码仅在拖拽结束时将水平位置left转换为相对父容器宽度的百分比，垂直方向的top属性仍被jQuery UI设置为固定像素值，因此窗口高度变化时元素不会按比例调整位置，就会出现移出可视区的问题。

解决方案

拖拽结束时同步将垂直位置也转换为相对高度的百分比
可额外增加窗口resize事件的边界校验，避免极端情况下元素超出可视区域

修改后的完整代码

$(function() {
  const $dragEle = $(".drag-me");
  
  $dragEle.draggable({
    containment: "window",
    stop: function(e, ui) {
      // 横向百分比转换，保留原有逻辑
      const leftPerc = ui.position.left / ui.helper.parent().width() * 100;
      // 新增纵向百分比转换
      const topPerc = ui.position.top / ui.helper.parent().height() * 100;
      ui.helper.css({
        'left': leftPerc + '%',
        'top': topPerc + '%'
      });
    }
  });

  // 可选：窗口缩放时补充边界校验，避免元素超出可视区
  $(window).on('resize', function() {
    const winWidth = $(window).width();
    const winHeight = $(window).height();
    const eleWidth = $dragEle.outerWidth();
    const eleHeight = $dragEle.outerHeight();
    const eleOffset = $dragEle.offset();

    // 左边界校验
    if (eleOffset.left < 0) $dragEle.css('left', '0%');
    // 右边界校验
    if (eleOffset.left + eleWidth > winWidth) $dragEle.css('left', `${(winWidth - eleWidth)/winWidth *100}%`);
    // 上边界校验
    if (eleOffset.top < 0) $dragEle.css('top', '0%');
    // 下边界校验
    if (eleOffset.top + eleHeight > winHeight) $dragEle.css('top', `${(winHeight - eleHeight)/winHeight *100}%`);
  })
});