dragndrop.ts

interface Position {
  left:string;
  top: string;
}
@Component({
  selector: 'drag-demo',
  template: `
    <div #target [ngStyle]="boxPosition | async">drag me</div>
  `
})
class MyComponent {
  boxPosition: Observable<Position>;
  @ObserveChild('target', 'mouseup')   mouseups:Observable<MouseEvent>;
  @ObserveChild('target', 'mousedown') mousedowns:Observable<MouseEvent>;
  @ObserveHost('document','mousemove') mousemoves:Observable<MouseEvent>;
  
  ngOnInit(){
    //for each mouse down event
    this.boxPosition = this.mousedowns
      .flatMap(md => {
        const startX = md.offsetX, startY = md.offsetY;
        //start listening to document mousemove events
        return this.mousemoves.map(mm => {
          mm.preventDefault();
          return {
            left: mm.clientX - startX + 'px',
            top: mm.clientY - startY + 'px'
          }
        }).takeUntil(this.mouseups); //tear down document mousemove listener upon mouseup
      });
  }
}