Angular2，拖動事件。關閉問題

Question

我正在爲Angular2中的可拖動組件構建指令。它必須運行跨瀏覽器，這裏是我遇到問題的地方。我瞭解到，在FireFox上，您無法查看'onDrag'鼠標事件的x，y座標。所以我給文檔附加了一個事件處理程序，所以我可以使用'dragover'函數檢索座標。不過，我認爲我在事件處理程序的關閉時遇到了一些問題。

在init上，我爲整個文檔附加dragover處理程序，並將它們存儲在全局臨時變量中。但是，當我嘗試訪問它們'onDrag'時，它們仍然處於原始值。

請你能幫我解決問題嗎？或者至少明白我做錯了什麼？ 謝謝

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

@Directive({ 
    selector: '[appDraggable]' 
}) 
export class DraggableDirective implements OnInit { 
    @Input('appDraggable') data: any; 

    private deltaX: number = 0; 
    private deltaY: number = 0; 

    private tempX: number = 0; 
    private tempY: number = 0; 

    constructor(private _elementRef: ElementRef, private renderer: Renderer) {} 

    ngOnInit() { 
    //get the current element 
    this.renderer.setElementAttribute(this._elementRef.nativeElement, 'draggable', 'true'); 

    //event listener to retrieve dragover coordinates. 
    document.addEventListener("dragover", function (ev: DragEvent) { 
     this.tempX = ev.x; 
     this.tempY = ev.y; 
    }); 
    } 

    @HostListener('dragstart', ['$event']) 
    onDragStart(e) { 
    if (e.dataTransfer != null) { 
     e.dataTransfer.setData('text/plain', null); 
    } 
    console.log("started dragging"); 

    this.deltaX = e.x - this._elementRef.nativeElement.offsetLeft; 
    this.deltaY = e.y - this._elementRef.nativeElement.offsetTop; 
    } 

    @HostListener('drag', ['$event']) 
    onDrag(e) { 
    console.log(this.tempX); 
    this.setChanges(this._elementRef.nativeElement, this.renderer, this.tempX, this.tempY, this.deltaX, this.deltaY); 
    } 

    @HostListener('dragend', ['$event']) 
    onDragEnd(e) { 
    this.deltaX = 0; 
    this.deltaY = 0; 
    console.log('stopped dragging!'); 

    document.removeEventListener('dragover'); 
    } 

    private setChanges(el: any, rend: Renderer, tempX: number, tempY: number, delX: number, delY: number) { 
    if (!tempX || !tempY) return; 

    rend.setElementStyle(el, 'top', (tempY - delY) + 'px'); 
    rend.setElementStyle(el, 'left', (tempX - delX) + 'px'); 

    } 
} 

Answer 1

使用箭頭功能() => {而不是function() {保留的this

ngOnInit() { 
    //get the current element 
    this.renderer.setElementAttribute(this._elementRef.nativeElement, 'draggable', 'true'); 

    //event listener to retrieve dragover coordinates. 
    document.addEventListener("dragover", (ev: DragEvent) =>{ 
     this.tempX = ev.x; 
     this.tempY = ev.y; 
    }); 
    }