ngb draggableモーダルを作成する

Question

私はng-bootstrapを使用してmodalを表示する角度アプリケーションを使用しています。

私の問題は、ngbチームがこれらのモーダルをドラッグすることをサポートしておらず、いつでもそうする予定がないことです。soon

私の質問は次のとおりです。どのように私はそのようなモーダルをドラッグ可能にすることができますか？

ありがとうございます。

Answer 1

ここでは、私が書いたものです - にちょうどあります不要なものがたくさんあります可能な限りパフォーマンスのすべてのビットを鳴らしていきますが、角度のあるベストプラクティスにも従います。私はそれをトリムでフォローしますダウン/簡略版。

これらはどちらも、ディレクティブのみを必要とし、必要な要素にディレクティブセレクタを追加する以外のCSSやHTMLの変更やクエリは必要ありません。どちらもtranslate3dを使用して、特定のブラウザでGPUアクセラレーションをトリガできるトップと左の位置を変更するのではなく、それがなくてもとにかく位置を変更するよりもスムーズに実行します。それが翻訳変換が為されたものです。どちらも、nativeElement属性に直接アクセスするのではなく、HostBindingを使用してプロパティにバインドします（不要な場合は、ディレクティブをDOMに結合します）。 2番目は素敵ですが、ElementRefやRenderer2の依存関係は必要ありませんが、常時オンのリスナーがドキュメントオブジェクトに追加されているので、めったに使用することはありません。

モーダルをクリックしたときにのみmousemoveリスナーが追加されるため、最初のものを使用します。これは、不要になったときにリスナーを削除するためです。さらに、角度の外ですべての移動機能を実行するので、モーダルをドラッグすると、角度の変化の検出が常に行われるわけではありません（モーダルボックス内は何も変化しません。 ）。そして、私のモーダルの大部分は動的に作成され、閉じられたときに破棄されるので、その場合はイベントリスナーを削除することもできます。私はelementrefを挿入して、nativeElementにアクセスする必要のあるディレクティブの親要素への参照を取得できますが、実際には値を変更するのではなく、参照を取得するために一度読み取るだけです。だから私は、角度教義にそのforgiveableを考える：P以下

import { Directive, 
     Input, 
     NgZone, 
     Renderer2, 
     HostListener, 
     HostBinding, 
     OnInit, 
     ElementRef } from '@angular/core'; 

class Position { 
    x: number; y: number; 
    constructor (x, y) { this.x = x; this.y = y; } 
}; 

@Directive({ 
    selector: '[lt-drag]' 
}) 
export class LtDragDirective { 

    private allowDrag = true; 
    private moving = false; 
    private origin = null; 

    // for adding/detaching mouse listeners dynamically so they're not *always* listening 
    private moveFunc: Function; 
    private clickFunc: Function; 

    constructor(private el:ElementRef, 
       private zone: NgZone, 
       private rend: Renderer2) {} 

    @Input('handle') handle: HTMLElement; 

    @HostBinding('style.transform') transform: string = 'translate3d(0,0,0)'; 

    ngOnInit() { 

    let host = this.el.nativeElement.offsetParent; 

    // applies mousemove and mouseup listeners to the parent component, typically my app componennt window, I prefer doing it like this so I'm not binding to a window or document object 

    this.clickFunc = this.rend.listen(host, 'mouseup' ,()=>{ 
    this.moving = false; 
    }); 

    // uses ngzone to run moving outside angular for better performance 
    this.moveFunc = this.rend.listen(host, 'mousemove' ,($event)=>{ 
     if (this.moving && this.allowDrag) { 
     this.zone.runOutsideAngular(()=>{ 
      event.preventDefault(); 
      this.moveTo($event.clientX, $event.clientY); 
     }); 
    } 
    }); 
} 

// detach listeners if host element is removed from DOM 
ngOnDestroy() { 
    if (this.clickFunc) { this.clickFunc(); } 
    if (this.moveFunc) { this.moveFunc(); } 
} 

// parses css translate string for exact px position 
private getPosition(x:number, y:number) : Position { 
    let transVal:string[] = this.transform.split(','); 
    let newX = parseInt(transVal[0].replace('translate3d(','')); 
    let newY = parseInt(transVal[1]); 
    return new Position(x - newX, y - newY); 
} 

private moveTo(x:number, y:number) : void { 
    if (this.origin) { 
     this.transform = this.getTranslate((x - this.origin.x), (y - this.origin.y)); 
    } 
} 

private getTranslate(x:number,y:number) : string{ 
    return 'translate3d('+x+'px,'+y+'px,0px)'; 
} 

    @HostListener('mousedown',['$event']) 
    onMouseDown(event: MouseEvent) { 
    if (event.button == 2 || (this.handle !== undefined && event.target !== 
    this.handle)) { 
    return; 
    } 
    else { 
    this.moving = true; 
    this.origin = this.getPosition(event.clientX, event.clientY); 
    } 
} 
} 

簡単なバージョン - あなたは

import { Directive, 
     Input, 
     HostListener, 
     HostBinding, 
     OnInit } from '@angular/core'; 

class Position { 
    x: number; y: number; 
    constructor (x, y) { this.x = x; this.y = y; } 
}; 

@Directive({ 
    selector: '[lt-drag]' 
}) 
export class LtDragDirective { 

    private moving = false; 
    private origin = null; 

    constructor() {} 

    @Input('handle') handle: HTMLElement; 

    @HostBinding('style.transform') transform: string = 'translate3d(0,0,0)'; 

    @HostListener('document:mousemove',[$event]) mousemove($event:MouseEvent) { 
     event.preventDefault(); 
     this.moveTo($event.clientX, $event.clientY); 
    } 

    @HostListener('document:mouseup') mouseup() { 
     this.moving = false; 
    } 

    @HostListener('mousedown',['$event']) 
    onMouseDown(event: MouseEvent) { 
     if (event.button == 2 || (this.handle !== undefined && event.target  !== this.handle)) { 
    return; // if handle was provided and not clicked, ignore 
    } 
    else { 
     this.moving = true; 
     this.origin = this.getPosition(event.clientX, event.clientY); 
    } 
} 
    private getPosition(x:number, y:number) : Position { 
    let transVal:string[] = this.transform.split(','); 
    let newX = parseInt(transVal[0].replace('translate3d(','')); 
    let newY = parseInt(transVal[1]); 
    return new Position(x - newX, y - newY); 
    } 

    private moveTo(x:number, y:number) : void { 
     if (this.origin) { 
     this.transform = this.getTranslate((x - this.origin.x), (y - 
     this.origin.y)); 
     } 
    } 

    private getTranslate(x:number,y:number) : string{ 
     return 'translate3d('+x+'px,'+y+'px,0px)'; 
    } 
} 

Answer 2

私はずっと前に何をしたのか分かりません。 cssとtsファイルのHostListenersを見てください。

HTML：

<div class="pdf-container"> 
    <div #pdfWrapper class="pdf-wrapper" [ngClass]="{'active': pdf}"> 
    <canvas #pdfCanvas [ngStyle]="{'pointer-events': pdf ? 'all' : 'none'}"></canvas> 
    <span (click)="removePDF()" class="btn-pdf pdf-close" *ngIf="pdf" [ngStyle]="{'pointer-events': pdf ? 'all' : 'none'}">X</span> 
    <span (click)="previousPage()" *ngIf="pdf && currentPage > 1" class="btn-pdf pdf-previous" [ngStyle]="{'pointer-events': pdf ? 'all' : 'none'}"><</span> 
    <span (click)="nextPage()" *ngIf="pdf && currentPage < numPages" class="btn-pdf pdf-next" [ngStyle]="{'pointer-events': pdf ? 'all' : 'none'}">></span> 
    </div> 
</div> 

STYLES：

.pdf-container { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    pointer-events: none; 
} 
.pdf-wrapper { 
    position: relative; 
    width: 450px; 
    height: 600px; 
} 
.pdf-wrapper.active { 
    box-shadow: 0 0 5px black; 
    cursor: move; 
} 
canvas { 
    position: absolute; 
    width: inherit; 
    height: inherit; 
} 
.btn-pdf { 
    position: absolute; 
    width: 20px; 
    height: 20px; 
    background-color: rgba(0, 0, 0, 0.5); 
    color: white; 
    text-align:center; 
    cursor: pointer; 
} 
.btn-pdf.pdf-close { 
    right: 0; 
} 
.btn-pdf.pdf-previous { 
    top: 50%;  
} 
.btn-pdf.pdf-next { 
    right: 0; 
    top: 50% 
} 

TSファイル：

@ViewChild('pdfWrapper') pdfWrapper; 
private mouseDown : boolean = false; 
    private lastMouseDown; 

@HostListener('mouseup') 
    onMouseup() { 
    this.mouseDown = false; 
    } 

    @HostListener('mousemove', ['$event']) 
    onMousemove(event: MouseEvent) { 
    if(this.mouseDown && this.pdf) { 
     this.pdfWrapper.nativeElement.style.top = (event.clientY - this.lastMouseDown.offsetY) + 'px'; 
     this.pdfWrapper.nativeElement.style.left = (event.clientX - this.lastMouseDown.offsetX) + 'px'; 
    } 

@HostListener('mousedown', ['$event']) 
    onMousedown(event) { 
    if (!this.mouseDown) { 
     this.lastMouseDown = event; 
    } 
    this.mouseDown = true; 

    }