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

我正在使用Angular2及其材质设计（）创建一个小型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>) {}
}

从'@angular/core'导入{Component}；
从“@angular/material”导入{MdDialog，MdDialogRef}；
@组成部分({
选择器：“对话框结果”，
templateUrl:'./dialog result.html'，
})
导出类对话框结果{
选择选项：字符串；
构造函数（公共对话框：MdDialog）{}
openDialog（）{
让dialogRef=this.dialog.open（dialog）；
dialogRef.afterClosed（）.subscribe（结果=>{
this.selectedOption=结果；
});
}
}
@组成部分({
选择器：“对话框”，
templateUrl:“./dialog.html”，
})
导出类对话框{
构造函数（公共dialogRef:MdDialogRef）{}
}

---

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

我正在使用可拖动库

打开对话框组件时，在选项中传递“panelClass”：

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

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

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

---

拖动库时共享链接