如何使 Bootstrap 模态弹出窗口在 Angular2 中可移动

Question

我的 Angular2 应用程序中有一个 Bootstrap 模式弹出窗口。我希望它是可拖动的。如果有人可以帮助我解决此问题，那将非常有帮助。

<div class="modal modal-sm fade fade in" [class]="modalWorkPhone" id="myModal" role="dialog">
   <div class="modal-dialog"> 
   <!-- Modal content-->
     <div class="modal-content">
       <div class="panel-heading" style="background-color:#2e90bd">
       </div>
     </div>
   </div>
</div>

Answer 1

以下指令代码适用于 Angular 6+ 和来自ng-bootstrap库的模态窗口。

您必须使该指令对您的视图模块可见，并且所有模态都将无需任何更改即可拖动，因为该指令绑定到.modal-header该类：

import { Directive, ElementRef, Renderer2, AfterViewInit, Input, OnDestroy } from '@angular/core';
import { fromEvent, Subscription } from 'rxjs';
import { mergeMap, takeUntil, tap } from 'rxjs/operators';

interface Point {x: number, y: number};

@Directive({
  selector: '.modal-header'
})
export class DragModalDirective implements AfterViewInit, OnDestroy  {

  constructor (
    private el: ElementRef,
    private renderer: Renderer2,
  ) {}

  subscription: Subscription;

  start: Point;
  offset: Point = {x: 0, y: 0};

  ngAfterViewInit() {       

    setTimeout(() => {
      this.makeItDraggable();      
    });

  }  

  private makeItDraggable() {

    const modalDialogElement = this.el.nativeElement.closest(".modal-dialog");

    if (!modalDialogElement) {
      console.error('DragModalDirective cannot find the parent element with class modal-dialog')
      return;
    }

    this.renderer.setStyle(this.el.nativeElement, 'user-select', 'none');
    this.renderer.setStyle(this.el.nativeElement, 'cursor', 'move'); 

    this.renderer.setStyle(modalDialogElement, 'transition', 'none');

    const down$ = fromEvent(this.el.nativeElement, 'mousedown')
    const move$ = fromEvent(document, 'mousemove');
    const up$ = fromEvent(document, 'mouseup')

    const drag$ = down$.pipe(        
      tap(($event: MouseEvent) => {
        this.start = {
          x: $event.clientX - this.offset.x, 
          y: $event.clientY - this.offset.y
        };
      }),
      mergeMap(down => move$.pipe(
        takeUntil(up$)
      ))
    );

    this.subscription = drag$.subscribe(($event: MouseEvent) => {
      this.offset = {
        x: $event.clientX - this.start.x,
        y: $event.clientY - this.start.y
      }

     this.renderer.setStyle(modalDialogElement, 'transform', `translate(${this.offset.x}px, ${this.offset.y}px)`);
    }) 
  }

  ngOnDestroy() {
    if (this.subscription)
      this.subscription.unsubscribe();
  } 
}