import { Directive , Output , EventEmitter , HostListener } from '@angular/core' ; @ Directive ( { selector : '[appDrag]' } ) export class DragDirective { down = false ; @ Output ( ) dragFinish = new EventEmitter ( ) ; @ HostListener ( 'document:mousemove' , [ '$event' ] ) handleDrag ( $event ) { if ( this . down ) { this . dragFinish . emit ( $event . clientX ) ; } } @ HostListener ( 'mousedown' , [ '$event' ] ) startDrag ( $event ) { this . down = true ; $event . preventDefault ( ) ; } @ HostListener ( 'document:mouseup' , [ '$event' ] ) endDrag ( $event ) { if ( this . down ) { this . dragFinish . emit ( $event . clientX ) ; } this . down = false ; } constructor ( ) { } }