Angular中如何限制div在input-form（PDF区域）外无法调整尺寸？

需要限制带有调整尺寸功能的<div>元素，使其在调整大小时无法超出包含PDF的.input-form区域范围。

现有代码 #

HTML代码 #

<div [id]="controlId" height="70px" width="220px" [ngStyle]="dragControlCSS" class="image" cdkDragBoundary=".input-form" cdkDrag
  (cdkDragEnded)="dragImageControl($event,controlId)" #drag="cdkDrag"
  (resized)="onResized()"
>
  <img
    [src]="profile"
    style="height:-webkit-fill-available; width:-webkit-fill-available;" top="0" cdkDragHandle
  >
  <button mat-stroked-button color="primary" class="remove-button" (click)="removeImageControl(controlId)">
    <mat-icon style="color: #bab5b5">close</mat-icon>
  </button>
</div>

CSS代码 #

.image {
  position: absolute;
  top: 0px;
  border: 3px dotted #ee9090;
  background-color: transparent;
  overflow: hidden;
  /* resize: both; */
}

.input-form {
  position: absolute;
  z-index: 1;
  padding-top: 6%;
  & input {
    position: absolute;
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.07);
  }
}

问题示意图 #

要实现调整尺寸时的边界限制，需要结合JavaScript动态计算和CSS约束，具体步骤如下：

1. 监听尺寸变化，动态计算最大可调整范围 #

在Angular组件的onResized()方法中，获取容器和目标元素的尺寸信息，计算出允许的最大宽高并设置：

import { ElementRef, ViewChild } from '@angular/core';

// 组件类中定义
@ViewChild('drag') dragElement!: ElementRef;
private inputFormEl = document.querySelector('.input-form') as HTMLElement;

onResized() {
  const dragEl = this.dragElement.nativeElement;
  const formRect = this.inputFormEl.getBoundingClientRect();
  const dragRect = dragEl.getBoundingClientRect();

  // 计算当前元素相对于input-form的剩余可用空间
  const maxAllowWidth = formRect.width - (dragRect.left - formRect.left);
  const maxAllowHeight = formRect.height - (dragRect.top - formRect.top);

  // 设置元素的最大宽高，防止超出容器
  dragEl.style.maxWidth = `${maxAllowWidth}px`;
  dragEl.style.maxHeight = `${maxAllowHeight}px`;

  // 可选：设置最小尺寸，避免元素被缩得过小
  dragEl.style.minWidth = '120px';
  dragEl.style.minHeight = '60px';
}

2. 修正容器与目标元素的CSS样式 #

确保.input-form有明确的尺寸和正确的定位，让边界计算更准确：

.input-form {
  position: relative; /* 改为relative，方便子元素基于容器定位 */
  z-index: 1;
  overflow: hidden; /* 可选：隐藏超出容器的部分 */
  padding-top: 6%;
  /* 必须设置明确宽高，或确保容器由内部PDF内容撑开 */
  width: 100%;
  height: 100vh; /* 示例值，根据实际场景调整 */
}

.image {
  position: absolute;
  top: 0;
  border: 3px dotted #ee9090;
  background-color: transparent;
  overflow: hidden;
  resize: both; /* 启用原生调整尺寸，如果用第三方库则对应配置 */
  min-width: 120px;
  min-height: 60px;
}

3. 拖拽结束后同步更新尺寸约束 #

因为已经用cdkDragBoundary限制了拖拽范围，在拖拽结束时需要重新计算最大宽高，确保拖拽到新位置后调整尺寸依然受边界限制：

dragImageControl(event: any, controlId: string) {
  // 原有拖拽逻辑保留
  // 同步更新尺寸约束
  this.onResized();
}

注意事项 #

• 如果使用第三方resize组件（如angular-resizable-element），需替换(resized)事件为对应组件的尺寸变化事件。
• 必须保证.input-form有明确的宽高，否则getBoundingClientRect()无法获取正确的边界数据。
• 最小尺寸可根据业务需求自由调整，也可以去掉该约束。

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