web-dev-qa-db-ja.com

MatDialogをドラッグ可能にする方法/ Angular Material

Angular Material Dialogをドラッグ可能にすることはできますか？angle2-draggableをインストールし、もちろん他のすべての要素の機能を使用できます。

しかし、ダイアログは動的に作成されるため、特別な要素でngDraggableを使用したり、テンプレート変数を使用したりすることはできません。

angulardialogdraggablematerial
24
HansDampfHH

Angular Material 7以降の更新

単純に cdkDrag ディレクティブを@angular/cdk/drag-dropから使用できます

dialog.html

<h1 mat-dialog-title 
   cdkDrag
   cdkDragRootElement=".cdk-overlay-pane" 
   cdkDragHandle>
     Hi {{data.name}}
</h1>

Stackblitzの例

前の答え：

そのための公式の解決策はないため、ダイアログタイトルに適用されるカスタムディレクティブを作成し、すべての作業を行います。

dialog.html

@Component({
  selector: 'app-simple-dialog',
  template: `
    <h1 mat-dialog-title mat-dialog-draggable-title>Hi {{data.name}}</h1>
                         ^^^^^^^^^^^^^^^^^^^^^^^^^^^
    <div mat-dialog-content>
      ...
    </div>
    <div mat-dialog-actions>
      ...
    </div>
  `
})
export class SimpleDialogComponent {

Ng-runの例

enter image description here

ここでの基本的な考え方は、MatDialogRef.updatePositionメソッドを使用してダイアログの位置を更新することです。ボンネットの下では、この方法はmargin-top | margin-leftの値を変更するため、ここでは最適なオプションではなく、トランスフォームを使用した方が良いと誰かが主張することができますが、トリックと組み込みサービスの助けを借りて。

また、ダイアログコンテナの初期位置を取得できるように、ディレクティブにMatDialogContainerを挿入する必要があります。 Angularマテリアルライブラリはflexを使用してダイアログをセンタリングし、特定の上/左の値を取得しないため、初期オフセットを計算する必要があります。

dialog-draggable-title.directive.ts

import { Directive, HostListener, OnInit } from '@angular/core';
import { MatDialogContainer, MatDialogRef } from '@angular/material';
import { Subscription } from 'rxjs/Subscription';
import { Observable } from 'rxjs/Observable';
import { takeUntil } from 'rxjs/operators/takeUntil';
import 'rxjs/add/observable/fromEvent';
import { take } from 'rxjs/operators/take';

@Directive({
  selector: '[mat-dialog-draggable-title]'
})
export class DialogDraggableTitleDirective implements OnInit {

  private _subscription: Subscription;

  mouseStart: Position;

  mouseDelta: Position;

  offset: Position;

  constructor(
    private matDialogRef: MatDialogRef<any>,
    private container: MatDialogContainer) {}

  ngOnInit() {
    this.offset = this._getOffset();
  }

  @HostListener('mousedown', ['$event'])
  onMouseDown(event: MouseEvent) {
    this.mouseStart = {x: event.pageX, y: event.pageY};

    const mouseup$ = Observable.fromEvent(document, 'mouseup');
    this._subscription = mouseup$.subscribe(() => this.onMouseup());

    const mousemove$ = Observable.fromEvent(document, 'mousemove')
      .pipe(takeUntil(mouseup$))
      .subscribe((e: MouseEvent) => this.onMouseMove(e));

    this._subscription.add(mousemove$);
  }

  onMouseMove(event: MouseEvent) {
      this.mouseDelta = {x: (event.pageX - this.mouseStart.x), y: (event.pageY - this.mouseStart.y)};

      this._updatePosition(this.offset.y + this.mouseDelta.y, this.offset.x + this.mouseDelta.x);
  }

  onMouseup() {
    if (this._subscription) {
      this._subscription.unsubscribe();
      this._subscription = undefined;
    }

    if (this.mouseDelta) {
      this.offset.x += this.mouseDelta.x;
      this.offset.y += this.mouseDelta.y;
    }
  }

  private _updatePosition(top: number, left: number) {
    this.matDialogRef.updatePosition({
      top: top + 'px',
      left: left + 'px'
    });
  }

  private _getOffset(): Position {
    const box = this.container['_elementRef'].nativeElement.getBoundingClientRect();
    return {
      x: box.left + pageXOffset,
      y: box.top + pageYOffset
    };
  }
}


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

場所を記憶する

@Rolandoからの質問：

モーダルを開くボタンが押されたときにモーダルが「最後に配置された場所」で開くように、モーダルが配置された場所を「記憶」したい。

それをサポートしてみましょう。

そのために、ダイアログの位置を保存するサービスを作成できます。

modal-position.cache.ts

@Injectable()
export class ModalPositionCache {
  private _cache = new Map<Type<any>, Position>();

  set(dialog: Type<any>, position: Position) {
    this._cache.set(dialog, position);
  }

  get(dialog: Type<any>): Position|null {
    return this._cache.get(dialog);
  }
}

ここで、このサービスをディレクティブに挿入する必要があります。

dialog-draggable-title.directive.ts

export class DialogDraggableTitleDirective implements OnInit {
  ...

  constructor(
    private matDialogRef: MatDialogRef<any>,
    private container: MatDialogContainer,
    private positionCache: ModalPositionCache
  ) {}

  ngOnInit() {
    const dialogType = this.matDialogRef.componentInstance.constructor;
    const cachedValue = this.positionCache.get(dialogType);
    this.offset = cachedValue || this._getOffset();
    this._updatePosition(this.offset.y, this.offset.x);

    this.matDialogRef.beforeClose().pipe(take(1))
      .subscribe(() => this.positionCache.set(dialogType, this.offset));
  }

ダイアログが閉じられるとすぐに最後のオフセットを保存できます。

Ng-runの例

この方法でダイアログは閉じられた場所を記憶します

enter image description here

42
yurzui

angular2-draggable、ngDraggableを使用して要素をドラッグ可能にします。ここで、ngDraggableはディレクティブであり、状況によっては、このngDraggableディレクティブを動的に作成されるダイアログに動的にアタッチする必要があります。

公式には、ディレクティブを動的に追加する方法はありませんが、ディレクティブを動的に追加するための以下の質問でいくつかの汚いトリックについて説明しています。

ディレクティブを動的に追加する方法

別のディレクティブのホストでAngular2ディレクティブを使用

0
WasiF