title: Angular2, Drag events. Closure issue
body: <p>I'm building a directive for draggable components in Angular2. It has to work cross browsers, and here is where I have a problem. I learned that on FireFox, you cannot view the x,y coordinates for 'onDrag' mouse events. So I attached an event handler to the document so I can retrieve the coordinates using a 'dragover' function. However I think I have some problem with the closures of the event handlers. </p>
  
  <p>On init, I attach the dragover handler for the entire document and store them in global temporary variables. However when I try accessing them 'onDrag' they still are at their original values.</p>
  
  <p>Please can you help me solve the problem? or atleast understand what I'm doing wrong?
  Thank you</p>
  
  <pre><code>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');
  
    }
  }
  </code></pre>