Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | 1x 1x 1x 1x 9x 1x 3x 1x 1x 1x 2x 1x 2x 2x 1x 3x 2x 3x 3x 1x 1x 3x 1x | import {Directive, Output, EventEmitter, HostBinding, HostListener} from '@angular/core'; import {DropData} from '../interfaces/DropData'; /** * @description A wrapper around the HTML 5 Drop API. */ @Directive({ selector: '[anjDroppable]' }) export class DroppableDirective { /** * @description Emitted after and HTML drop event. Emits data bound to anjDraggable. */ @Output() public anjDrop: EventEmitter<DropData>; @HostBinding('class.drag-over') public isDraggedOver: boolean; constructor() { this.anjDrop = new EventEmitter<DropData>(); } @HostListener('dragenter', ['$event']) public handleDragEnter(): void { this.isDraggedOver = true; } @HostListener('dragleave', ['$event']) public handleDragLeave(): void { this.isDraggedOver = false; } @HostListener('dragover', ['$event']) public handleDragOver(event: DragEvent): boolean { if (event.preventDefault) { event.preventDefault(); } event.dataTransfer.dropEffect = 'move'; return false; } @HostListener('drop', ['$event']) public handleDrop(event: DragEvent): boolean { if (event.stopPropagation) { event.stopPropagation(); // Stops some browsers from redirecting. } this.isDraggedOver = false; if (event.dataTransfer && event.dataTransfer.getData && event.dataTransfer.getData('data')) { const data = JSON.parse(event.dataTransfer.getData('data')); this.anjDrop.emit({payload: data}); } return false; } } |