javascript - Angular2，拖动事件。关闭问题

Question

我正在为 Angular2 中的可拖动组件构建指令。它必须跨浏览器工作，这就是我遇到的问题。我了解到，在 FireFox 上，您无法查看“onDrag”鼠标事件的 x,y 坐标。因此，我将一个事件处理程序附加到文档中，以便我可以使用“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;
    });
  }