版本
本案例使用的 Angular 7.x 版本,Material 7.x 版本,但不限于此版本。
新建Angular指令
新建指令命令:
ng generate directive dialog-draggable
指令中拖拽功能代码实现:
import { Directive, HostListener, OnInit } from '@angular/core'; import { MatDialogContainer, MatDialogRef } from '@angular/material'; import { Subscription, fromEvent } from 'rxjs'; import { takeUntil } from 'rxjs/operators';
export interface Position { x: number; y: number; }
@Directive({ selector: '[dialog-draggable]' }) export class DialogDraggableDirective implements OnInit {
private _subscription: Subscription;
mouseStart: Position;
mouseDelta: Position;
offset: Position;
constructor( private matDialogRef: MatDialogRef<any>, private container: MatDialogContainer ) { }
ngOnInit() { this.offset = this._getOffset(); this._updatePosition(this.offset.y, this.offset.x); }
@HostListener('mousedown', ['$event']) onMouseDown(event: MouseEvent) { this.mouseStart = { x: event.pageX, y: event.pageY };
const mouseup$ = fromEvent(document, 'mouseup'); this._subscription = mouseup$.subscribe(() => this.onMouseup());
const mousemove$ = 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 }; } }
|
在全局的CSS样式文件添加下面的CSS代码:
[dialog-draggable] { margin: -24px -24px 20px -24px !important; padding: 10px 24px; background: #283593 !important; color: #fff; cursor: move; }
|
如何使用
在Dialog组件中使用dialog-draggable指令即可实现窗口拖拽,如下
<h2 mat-dialog-title dialog-draggable> Angular Material Dialog Draggable </h2>
|