制作一个 CdkDrag 角度元素列表，当前一个元素关闭时，该元素不会移动

Question

问题： 我有一个未定义的弹出窗口列表（用户可以根据需要打开）。这些窗口可以作为 CdkDrag 元素在应用程序上移动。如果我们关闭其中一个窗口，则会出现问题，随后的窗口将在屏幕上移动与关闭的窗口相同的大小。不是之前创建的窗口。

我想要什么： 如果我关闭其中一个 CdkDrag 窗口，其他窗口不应移动。

我在这里做了一个简化的演示： https://stackblitz.com/edit/stackblitz-starters-bktmuk?file=package.json

还有一个视频： https://youtube.com/shorts/WdTsYX3nyFs

感谢您的帮助

Answer 1

你必须移动组件上的 for 循环，应该只有一个下拉列表。

然后我们需要在 for 循环上移动

cdkDrag

指令，因为这是将被拖动到列表中的元素。

我们将绝对定位子项，因此我们需要将可拖动容器设置为相对位置。

<span CdkDropList style="position: relative;">
  <modal
    cdkDrag
    *ngFor="let item of modalListComponent; let i = index"
    (onClose)="onCloseEvent($event)"
    [guid]="item.guid"
  ></modal>
</span>

---

在子组件上，我们设置

modal

组件的绝对定位。

:host {
  position: absolute;
  left: 0px;
  top: 20px;
}

最后我们删除该指令并保持原样。

<div class="count-down-timer">
  This is a window
  <button shape="round" slot="end" (click)="onCloseEvent()">Close</button>
</div>

---

Stackblitz 演示