Javascript Angular2，拖动事件。关闭问题

我正在为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');

  }
}

使用箭头函数

（）=>{

而不是

函数（）{

来保留

此

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