如何用Angular Material 2实现可拖拽mat-dialog？求Angular5方案指导

好问题！Angular Material的mat-dialog本身并没有内置拖拽功能，但我们完全可以通过自定义指令来实现你想要的可拖拽对话框效果，参考你提到的示例思路，我整理了一套适配Angular 5的实现方案：

第一步：创建拖拽指令 #

我们先写一个通用的拖拽指令，用来处理鼠标的拖拽事件逻辑：

import { Directive, ElementRef, HostListener, Input, OnInit } from '@angular/core';

interface Position {
  x: number;
  y: number;
}

@Directive({
  selector: '[appDraggable]'
})
export class DraggableDirective implements OnInit {
  @Input('appDraggable') dragHandleSelector: string;
  
  private dialogContainer: HTMLElement;
  private dragHandle: HTMLElement;
  private cursorPosition: Position;
  private offsetPosition: Position;

  constructor(private el: ElementRef, private document: Document) {
    this.cursorPosition = { x: 0, y: 0 };
    this.offsetPosition = { x: 0, y: 0 };
  }

  ngOnInit(): void {
    // 获取Mat-Dialog的容器元素
    this.dialogContainer = this.el.nativeElement.closest('mat-dialog-container');
    // 设置容器为相对定位（Mat-Dialog默认是fixed，调整后方便拖拽定位）
    this.dialogContainer.style.position = 'relative';

    // 确定拖拽手柄：如果指定了选择器则用指定元素，否则用整个容器
    if (this.dragHandleSelector) {
      this.dragHandle = this.el.nativeElement.querySelector(this.dragHandleSelector);
    } else {
      this.dragHandle = this.el.nativeElement;
    }
    this.dragHandle.style.cursor = 'move';
  }

  @HostListener('mousedown', ['$event'])
  onMouseDown(event: MouseEvent): void {
    event.preventDefault();
    // 记录鼠标初始位置和容器的偏移量
    const x = event.pageX - this.offsetPosition.x;
    const y = event.pageY - this.offsetPosition.y;
    this.cursorPosition = { x, y };

    // 添加鼠标移动和抬起的全局监听
    this.document.addEventListener('mousemove', this.onMouseMove.bind(this));
    this.document.addEventListener('mouseup', this.onMouseUp.bind(this));
  }

  private onMouseMove(event: MouseEvent): void {
    // 计算新的偏移量
    const x = event.pageX - this.cursorPosition.x;
    const y = event.pageY - this.cursorPosition.y;
    this.offsetPosition = { x, y };
    // 更新容器的位置
    this.dialogContainer.style.left = `${x}px`;
    this.dialogContainer.style.top = `${y}px`;
  }

  private onMouseUp(): void {
    // 移除全局监听，结束拖拽
    this.document.removeEventListener('mousemove', this.onMouseMove.bind(this));
    this.document.removeEventListener('mouseup', this.onMouseUp.bind(this));
  }
}

第二步：创建可拖拽的对话框组件 #

接下来我们创建一个对话框组件，把拖拽指令应用到它的头部：

对话框模板 (draggable-dialog.component.html) #

<div appDraggable=".dialog-header">
  <div class="dialog-header">
    <h3>我是可拖拽的Mat-Dialog!</h3>
  </div>
  <div class="dialog-body">
    <p>这是对话框的内容区域</p>
  </div>
  <div class="dialog-footer">
    <button mat-button (click)="onOk()">确定</button>
    <button mat-button (click)="onCancel()">取消</button>
  </div>
</div>

对话框组件类 (draggable-dialog.component.ts) #

import { Component } from '@angular/core';
import { MatDialogRef } from '@angular/material/dialog';

@Component({
  selector: 'app-draggable-dialog',
  templateUrl: './draggable-dialog.component.html',
  styles: [`
    .dialog-header {
      padding: 16px;
      background-color: #f5f5f5;
      border-bottom: 1px solid #eee;
    }
    .dialog-body {
      padding: 16px;
    }
    .dialog-footer {
      padding: 16px;
      border-top: 1px solid #eee;
      text-align: right;
    }
  `]
})
export class DraggableDialogComponent {
  constructor(private dialogRef: MatDialogRef<DraggableDialogComponent>) {}

  onOk(): void {
    this.dialogRef.close('ok');
  }

  onCancel(): void {
    this.dialogRef.close('cancel');
  }
}

第三步：在主组件中打开对话框 #

在你的主组件里，通过MatDialog服务打开这个可拖拽的对话框：

import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { DraggableDialogComponent } from './draggable-dialog/draggable-dialog.component';

@Component({
  selector: 'app-root',
  template: `
    <div class="text-center p-4">
      <button mat-raised-button (click)="openDraggableDialog()">打开可拖拽对话框</button>
    </div>
  `
})
export class AppComponent {
  constructor(private dialog: MatDialog) {}

  openDraggableDialog(): void {
    this.dialog.open(DraggableDialogComponent, {
      backdrop: false, // 可根据需求保留/去掉背景，不影响拖拽
      width: '400px'
    });
  }
}

第四步：模块配置 #

别忘了在你的NgModule中声明指令和对话框组件，并且导入Angular Material的Dialog模块：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatDialogModule, MatButtonModule } from '@angular/material';

import { AppComponent } from './app.component';
import { DraggableDialogComponent } from './draggable-dialog/draggable-dialog.component';
import { DraggableDirective } from './draggable.directive';

@NgModule({
  declarations: [
    AppComponent,
    DraggableDialogComponent,
    DraggableDirective
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatDialogModule,
    MatButtonModule
  ],
  entryComponents: [DraggableDialogComponent], // Angular 5中需要把对话框组件加入entryComponents
  bootstrap: [AppComponent]
})
export class AppModule { }

关键说明 #

• 指令通过closest('mat-dialog-container')获取到Mat-Dialog的容器元素，调整定位方式实现拖拽
• 支持指定拖拽手柄（示例里的.dialog-header），只有点击该区域才能拖拽对话框
• 拖拽逻辑和你参考的AngularJS示例核心思路一致：记录鼠标按下位置，监听鼠标移动更新容器位置，鼠标抬起时停止监听

内容的提问来源于stack exchange，提问作者User2786