Angular可拖拽缩放Div问题求助：元素移位与顶部缩放异常

问题1：调整第一个子Div大小时下方子Div移位 #

• 给两个可拖拽缩放的子Div添加position: absolute样式。默认的static定位会让元素占据文档流空间，第一个元素尺寸变化时会挤压下方元素，脱离文档流后彼此的尺寸/位置变化互不影响：

.resizable-widget {
  position: absolute;
  /* 保留原有样式，比如背景、边框等 */
}

问题2：从顶部边缘向上拖拽缩放时元素向下扩展 #

1. 修正属性拼写错误：第一个子Div里的rzContain siment="parent"是拼写错误，改为rzContainment="parent"，这个属性负责限制缩放范围在父容器内，错误拼写会导致约束失效。
2. 固定缩放原点：通过CSS设置缩放的基准点，确保拖拽顶部手柄时元素向上扩展：

.resizable-widget.logo {
  transform-origin: top left;
}

也可以使用组件内置的rzOrigin属性配置缩放原点，比如rzOrigin="top left"，效果一致。

修正后的完整模板代码 #

<div class="bound-box" #myBounds [ngStyle]="{'background-image': 'url(' + mainImageUrl + ')', 'background-size': 'cover','height' : ''+maxHeight+'px','width' : ''+maxWidth+'px'  }">
    <div ngResizable ngDraggable
         [inBounds]="true"
         [bounds]="myBounds"
         rzContainment="parent"
         rzHandles="all"
         class="resizable-widget logo"
         [position]="{x: logoPositionX, y:logoPositionY}"
         [ngStyle]="{'height' : ''+logoHeight+'px','width' : ''+logoWidth+'px'}">
      <p class="widget-header">Logo</p>
    </div>

    <div ngResizable ngDraggable
         [inBounds]="true"
         [bounds]="myBounds"
         rzContainment="parent"
         rzHandles="all"
         class="resizable-widget block"
         [position]="{x: blockPositionX, y:blockPositionY}"
         [ngStyle]="{'height' : ''+blockHeight+'px','width' : ''+blockWidth+'px'}">
      <p class="widget-header">{{block.text}}</p>
    </div>
</div>

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