如何使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

我有相同的用户请求，并使用npm模块“angular-draggable”解决了它。只需按照描述安装，并将draggable="true"属性添加到您的模态div。

Answer 2

以下指令代码适用于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();
  } 
}