代码之家 › 专栏 › 技术社区 › Iteration

列出在关闭前一个元素时不移动的CdkDrag Angular元素

angular-cdk-drag-drop angular-material angular

1

Iteration · 技术社区 · 1 年前

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

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

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

这里有一个视频: https://youtube.com/shorts/WdTsYX3nyFs

谢谢你的帮助

1 回复 | 直到 1 年前

1

Naren Murali 1 年前

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

然后我们需要移动 cdkDrag for循环上的指令,因为这是将被拖动到列表中的元素。

我们将对子对象进行绝对定位,因此需要将可拖动容器设置为相对位置。

<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>

列出在关闭前一个元素时不移动的CdkDrag Angular元素

Stackblitz Demo