Jquery Resizable问题：调整尺寸时阻止Div元素重叠

我帮你搞定这个jQuery Resizable的重叠问题！你遇到的核心问题是之前的方案只限制了单侧宽度，还锁死了宽度增大的可能，咱们可以通过动态计算相邻元素的边界，在调整过程中实时限制当前元素的尺寸范围来解决。

核心思路 #

要让调整尺寸时不会和相邻元素重叠，我们需要：

• 调整左侧边缘时，不能越过前一个元素的右侧边界
• 调整右侧边缘时，不能越过下一个元素的左侧边界
• 同时保证元素有最小宽度限制，避免缩到无法操作
• 实时计算父容器的宽度，确保元素不会超出父容器范围

完整代码实现 #

首先是基础HTML结构：

<div class="parent">
  <div class="resizable" style="left: 0; width: 200px;"></div>
  <div class="resizable" style="left: 200px; width: 200px;"></div>
  <div class="resizable" style="left: 400px; width: 200px;"></div>
</div>

然后是CSS（确保定位逻辑正确）：

.parent {
  position: relative;
  width: 600px;
  height: 150px;
  border: 1px solid #ddd;
  margin: 20px;
}

.resizable {
  position: absolute;
  height: 100%;
  background-color: #f5f5f5;
  border: 1px solid #333;
  box-sizing: border-box;
}

关键的JavaScript逻辑：

$(function() {
  $(".resizable").resizable({
    handles: 'e,w', // 允许左右两侧调整尺寸，可按需修改为'e'或'w'
    start: function(event, ui) {
      const $current = $(this);
      // 记录调整前的关键信息
      ui.prevElement = $current.prev();
      ui.nextElement = $current.next();
      ui.parentWidth = $current.parent().outerWidth();
      ui.initialLeft = $current.offset().left - $current.parent().offset().left;
      ui.minWidth = 50; // 自定义最小宽度，可根据需求修改
    },
    resize: function(event, ui) {
      const $current = $(this);
      let newLeft = ui.position.left;
      let newWidth = ui.size.width;
      let newRight = newLeft + newWidth;

      // 限制左侧边界：不能超过前一个元素的右侧
      if (ui.prevElement.length) {
        const prevRight = ui.prevElement.offset().left - $current.parent().offset().left + ui.prevElement.outerWidth();
        if (newLeft < prevRight) {
          newLeft = prevRight;
          newWidth = newRight - newLeft;
        }
      } else {
        // 第一个元素，左侧不能超出父容器左边界
        newLeft = Math.max(newLeft, 0);
        newWidth = newRight - newLeft;
      }

      // 限制右侧边界：不能超过下一个元素的左侧
      if (ui.nextElement.length) {
        const nextLeft = ui.nextElement.offset().left - $current.parent().offset().left;
        if (newRight > nextLeft) {
          newRight = nextLeft;
          newWidth = newRight - newLeft;
        }
      } else {
        // 最后一个元素，右侧不能超出父容器右边界
        newRight = Math.min(newRight, ui.parentWidth);
        newWidth = newRight - newLeft;
      }

      // 保证元素宽度不小于最小限制
      if (newWidth < ui.minWidth) {
        if (event.handleObj.name === 'w') {
          // 拖动左侧时，调整left值维持最小宽度
          newLeft = newRight - ui.minWidth;
        } else {
          // 拖动右侧时，调整right值维持最小宽度
          newRight = newLeft + ui.minWidth;
        }
        newWidth = ui.minWidth;
      }

      // 更新元素的位置和宽度
      ui.position.left = newLeft;
      ui.size.width = newWidth;
      $current.css({
        left: newLeft,
        width: newWidth
      });
    },
    stop: function(event, ui) {
      // 调整结束后做最终校验，消除边界误差
      const $current = $(this);
      let finalLeft = ui.position.left;
      let finalWidth = ui.size.width;
      let finalRight = finalLeft + finalWidth;

      if (ui.prevElement.length) {
        const prevRight = ui.prevElement.offset().left - $current.parent().offset().left + ui.prevElement.outerWidth();
        finalLeft = Math.max(finalLeft, prevRight);
      } else {
        finalLeft = Math.max(finalLeft, 0);
      }

      if (ui.nextElement.length) {
        const nextLeft = ui.nextElement.offset().left - $current.parent().offset().left;
        finalRight = Math.min(finalRight, nextLeft);
      } else {
        finalRight = Math.min(finalRight, ui.parentWidth);
      }

      finalWidth = finalRight - finalLeft;
      finalWidth = Math.max(finalWidth, ui.minWidth);
      finalRight = finalLeft + finalWidth;

      $current.css({
        left: finalLeft,
        width: finalWidth
      });
    }
  });
});

代码说明 #

1. start事件：记录调整前的关键信息，比如相邻元素、父容器宽度、元素初始位置和最小宽度，为后续计算做准备。
2. resize事件：实时计算当前元素的可调整范围，分别限制左右边界，同时保证最小宽度，避免元素缩到无法操作。
3. stop事件：在调整结束后做最终校正，消除可能的边界误差，确保元素状态完全符合预期。

注意事项 #

• 父容器必须设置position: relative，这样子元素的left属性是相对于父容器的。
• 子元素要设置position: absolute，确保可以通过left和width属性调整位置和尺寸。
• 可以根据需求修改minWidth的值，或者调整handles参数来限制可调整的边缘（比如只允许右侧调整就设为'e'）。

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