如何在 Angular 2 材质设计中使 MdDialog 可拖动(可移动)

Question

我正在使用Angular2及其Material Design(https://material.angular.io(创建一个小型Web应用程序，其中我使用以下代码使用MdDialog显示对话框：

import {Component} from '@angular/core';
import {MdDialog, MdDialogRef} from '@angular/material';

@Component({
  selector: 'dialog-result',
  templateUrl: './dialog-result.html',
})
export class DialogResult {
  selectedOption: string;
  constructor(public dialog: MdDialog) {}
  openDialog() {
    let dialogRef = this.dialog.open(Dialog);
    dialogRef.afterClosed().subscribe(result => {
      this.selectedOption = result;
    });
  }
}

@Component({
  selector: 'dialog',
  templateUrl: './dialog.html',
})
export class Dialog {
  constructor(public dialogRef: MdDialogRef<Dialog>) {}
}

我想使用鼠标使对话框可拖动或可移动，以便我也可以看到我的页面内容。

Answer 1

我正在使用Draggabilly库。

打开对话框组件时，在选项中传递服装"面板类"：

let dialogRef = this.dialog.open(Dialog, {
    panelClass: 'dialog-container'
});

然后，在对话框组件ngOnInit钩子中初始拖动：

const holder = new draggablilly('.dialog-container');