Drop zones will act as containers where draggable elements can be dropped. For this, we'll create a new draggable drop zone directive. Let's use the Angular CLI to create the directive:
ng generate directive --spec false draggable/draggable-drop-zone
Let's open the directive file, located in src/app/draggable/draggable-drop-zone.directive.ts, and add the following code:
import {Directive, EventEmitter, HostBinding, HostListener, Input, Output} from '@angular/core';import {DraggableType} from '../model';@Directive({ selector: '[macDraggableDropZone]'})export class DraggableDropZoneDirective { @Input() dropAcceptType: DraggableType; @Output() outDropDraggable = new EventEmitter<any>(); @HostBinding('class.over') ...
