时间戳

首页 > 解决方案 > 多个可拖动的模态或角度弹出窗口

angular - 多个可拖动的模态或角度弹出窗口

问题描述

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

标签： angular

解决方案

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

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

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示例。

推荐阅读