咨询：动态绝对定位Div在父元素外并排显示且归属父元素的实现（含拖拽缩放）

我来帮你一步步搞定这个需求，核心要解决三个关键点：初始让子div在父容器外并排但仍属于父元素、拖拽/调整尺寸时限制在父容器内、保存并恢复位置尺寸。

1. 基础HTML结构 #

首先父容器必须设置position: relative，这样绝对定位的子元素才会以它为参照。子div用唯一id标识，方便后续保存和恢复：

<div id="parent-box" class="parent-container">
  <div id="box" class="draggable-resizable-box">Box 1</div>
  <div id="box0" class="draggable-resizable-box">Box 2</div>
  <div id="box1" class="draggable-resizable-box">Box 3</div>
</div>

2. CSS设置：让子元素初始在父容器外并排 #

父容器要保持overflow: visible（默认就是这个值，别改成hidden就行），这样子元素在外面也能显示。子元素用绝对定位，通过负的left值让它们并排排列在父容器左侧外面：

.parent-container {
  position: relative;
  width: 600px;
  height: 400px;
  border: 2px solid #ccc;
  margin: 50px auto;
  /* overflow: visible; 默认值，可省略 */
}

.draggable-resizable-box {
  position: absolute;
  width: 180px;
  height: 120px;
  background: #f5f5f5;
  border: 1px solid #333;
  padding: 10px;
  cursor: move;
}

/* 初始位置：让三个盒子并排在父容器左侧外面 */
#box {
  left: -200px;
  top: 20px;
}
#box0 {
  left: -400px;
  top: 20px;
}
#box1 {
  left: -600px;
  top: 20px;
}

3. jQuery UI配置：拖拽+尺寸调整+边界限制 #

给每个子元素绑定draggable和resizable，重点设置containment: "#parent-box"，确保拖拽和调整时不会超出父容器范围：

$(function() {
  // 初始化拖拽和尺寸调整
  $(".draggable-resizable-box").each(function() {
    const $box = $(this);
    $box.draggable({
      containment: "#parent-box", // 限制在父容器内拖拽
      stop: saveBoxSettings // 拖拽停止时保存设置
    });
    $box.resizable({
      containment: "#parent-box", // 限制在父容器内调整尺寸
      stop: saveBoxSettings // 调整停止时保存设置
    });
  });

  // 页面加载时恢复保存的设置
  loadBoxSettings();
});

4. 保存和恢复设置：用localStorage存储 #

写两个函数，分别负责保存每个盒子的位置和尺寸，以及页面加载时读取数据并恢复：

// 保存盒子的位置和尺寸到localStorage
function saveBoxSettings() {
  const boxSettings = [];
  $(".draggable-resizable-box").each(function() {
    const $box = $(this);
    boxSettings.push({
      id: $box.attr("id"),
      top: $box.css("top"),
      left: $box.css("left"),
      width: $box.css("width"),
      height: $box.css("height")
    });
  });
  localStorage.setItem("boxSettings", JSON.stringify(boxSettings));
}

// 从localStorage读取并恢复盒子设置
function loadBoxSettings() {
  const savedSettings = localStorage.getItem("boxSettings");
  if (!savedSettings) return;

  const boxSettings = JSON.parse(savedSettings);
  boxSettings.forEach(setting => {
    const $box = $("#" + setting.id);
    if ($box.length) {
      $box.css({
        top: setting.top,
        left: setting.left,
        width: setting.width,
        height: setting.height
      });
    }
  });
}

关键细节说明 #

• 子元素属于父元素：因为父容器是position: relative，子元素用position: absolute，哪怕初始位置在父容器外，DOM结构上它还是父容器的子元素，不会脱离父元素的管辖。
• 边界限制：containment参数确保拖拽和调整尺寸时，盒子不会超出父容器，满足你“始终处于父元素内部”的需求。
• 持久化存储：用localStorage存储数据，关闭页面再打开也能恢复之前的设置，如果你需要多设备同步，可以换成后端接口存储。

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