import { Directive , ElementRef , HostListener , Input , HostBinding , Output , EventEmitter } from '@angular/core' ; import { TreeModel } from '../models/tree-view.model' ; import { NgxTreeService } from '../ngx-tree-dnd.service' ; @ Directive ( { selector : '[libDropElement]' } ) export class DropElementsDirective { constructor ( private el , private treeService ) { } @ Input ( ) item : TreeModel ; @ Output ( ) drop = new EventEmitter ( ) ; @ HostListener ( 'dragover' , [ '$event' ] ) onDragOver ( event ) { const eventObj = { event , target : this . item } ; this . treeService . onDragOver ( eventObj ) ; event . preventDefault ( ) ; } @ HostListener ( 'drop' , [ '$event' ] ) onDrop ( event ) { const dragItem = this . treeService . isDragging ; const eventObj = { event , target : this . item } ; dragItem . options . hideChildrens = this . treeService . lastExpandState ; dragItem . options . currentlyDragging = false ; if ( dragItem !== eventObj . target ) { this . treeService . onDropItem ( eventObj ) ; } event . preventDefault ( ) ; } @ HostListener ( 'dragenter' , [ '$event' ] ) onDragEnter ( event ) { const eventObj = { event , target : this . item } ; this . treeService . enterDropZone ( eventObj ) ; } @ HostListener ( 'dragleave' , [ '$event' ] ) onDragLeave ( event ) { const eventObj = { event , target : this . item } ; this . treeService . leaveDropZone ( eventObj ) ; } }