angular2 rxjs dragabble directive

angular2_rxjs_dragabble.directive.ts

import { ElementRef, Directive, HostListener, Renderer } from 'angular2/core';
import { Subject } from 'rxjs';

@Directive({
  selector: '[draggable]'
})
export class Draggable {
  mousedrag;
  mouseup   = new Subject();
  mousedown = new Subject();
  mousemove = new Subject();

  @HostListener('mouseup', ['$event'])
  onMouseup(event) { this.mouseup.next(event); }

  @HostListener('mousedown', ['$event'])
  onMousedown(event) { this.mousedown.next(event); }

  @HostListener('mousemove', ['$event'])
  onMousemove(event) { this.mousemove.next(event); }

  constructor(public element: ElementRef, public renderer: Renderer) {
    this.renderer.setElementStyle(element.nativeElement, 'position', 'relative');
    this.renderer.setElementStyle(element.nativeElement, 'cursor', 'pointer');

    this.mousedrag = this.mousedown.map(event => {
        event.preventDefault();

        return {
          top: this.element.nativeElement.getBoundingClientRect().top,
          left: this.element.nativeElement.getBoundingClientRect().left
        };
      })
      .flatMap(imageOffset => this.mousemove.map(pos => ({
          top:  pos.clientY - imageOffset.top,
          left: pos.clientX - imageOffset.left
        }))
        .takeUntil(this.mouseup));
  }

  ngOnInit() {
    this.mousedrag.subscribe({
      next: pos => {
        // Update position
        this.element.nativeElement.style.top  = pos.top  + 'px';
        this.element.nativeElement.style.left = pos.left + 'px';
      }
    });
  }
}