多个可拖动的模态或角度弹出窗口答案

【问题标题】：Multiple draggable modals or pop ups in angular多个可拖动的模态或角度弹出窗口
【发布时间】：2021-06-23 13:48:55
【问题描述】：

任何人都可以建议我如何创建多个可拖动的模态或角度弹出窗口，因为角度材料不允许多个模态，有没有其他方法可以做到这一点

【问题讨论】：

Material 允许多个模态，所以你能告诉我们你到目前为止尝试了什么。
@ХристиянХристов - 我创建了两个简单的模态，但它们相互重叠，我可以与其他交互，除非我不关闭一个，否则我需要像五个单独的模态一样打开并放置拖动到它的功能。
以后请尝试提供有关您的问题的更多信息，到目前为止您尝试了什么，如果可能的话，请提供与您的问题相关的 stackblitz 链接，这将使您的问题更容易被社区接受.

【解决方案1】：

开始拖动对话框并不容易，但在不同位置打开多个对话框是一件容易的事。

这里的关键部分是您希望能够拖动这些对话框/元素，为此我建议您使用材质拖放模块（因为我看到您无论如何都在使用材质）。

import { Component } from '@angular/core';

@Component({
  selector: 'cdk-drag-drop-free-drag-position-example',
  templateUrl: 'cdk-drag-drop-free-drag-position-example.html',
  styleUrls: ['cdk-drag-drop-free-drag-position-example.css']
})
export class CdkDragDropFreeDragPositionExample {
  dialogCoordiantes: { [key: number]: { x: number; y: number } } = {};
  activeDialogs: number[] = [];

  addDialog() {
    let dialogId = Math.random();
    this.activeDialogs.push(dialogId);
    this.dialogCoordiantes[dialogId] = {
      x: 0,
      y: 0 - (this.activeDialogs.length - 1) * 190
    };
  }
}

<button (click)="addDialog()">Add Dialog</button>

<div style="max-height:0px; height:0px; position:fixed;">
  <mat-card
    *ngFor="let id of activeDialogs"
    cdkDrag
    [cdkDragFreeDragPosition]="dialogCoordiantes[id]"
    class="example-box"
  >
    Separate Dialog with id {{id}}
  </mat-card>
</div>

<h1>
  Here is an example of drag and drop, start clicking the add Dialog button
</h1>

通过导入拖放功能，您将可以访问cdkDrag 指令，这将使附加它的元素可拖动。如果要指定或更改那些可拖动元素的位置，可以使用cdkDragFreeDragPosition。

这是一个有效的stackBlitz 示例。

【讨论】：