gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 03:05:10 24 4
gpt4 key购买 nike

我的 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>

最佳答案

以下指令代码适用于 Angular 6+ 和 ng-bootstrap 中的模态窗口图书馆。

您必须使该指令对您的 View 模块可见,并且所有模态都将变为可拖动而无需任何更改,因为该指令绑定(bind)到 .modal-header类(class):

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();
}
}

关于twitter-bootstrap - 如何使 Bootstrap 模态弹出窗口在 Angular2 中可移动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45281473/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com