angular - Țintă de Drag and Drop Angular2

Implement o funcție de drag and drop în aplicația mea Angular2 care funcționează astfel... Un utilizator vede o listă de opțiuni din care poate alege și o zonă de drop deasupra listei - când trag de la una dintre opțiuni în zona de drop, evenimentul este gestionat.

Până acum, am o directivă de tip draggable care gestionează evenimentul de început al tragerei și setează unele date pe atributul dataTransfer al evenimentului. Ce am încercat să fac este să creez o altă directivă care să fie o directivă dropTarget care gestionează pur și simplu evenimentul de drop și preia datele.

Este acesta ceva ce este posibil de făcut? Ar fi mai bine să folosesc aceeași directivă pentru div-urile care pot fi trase și pentru zona de aruncare și să inserez niște logică pentru a permite evenimentul de aruncare să aibă loc doar atunci când div-ul este aruncat pe ținta corectă.

Mulțumesc

EDITARE: Cod

Iată codul pentru directiva mea dragabilă:

import {Directive, ElementRef} from '@angular/core';

@Directive({
    selector: '[myDraggable]',
    host: {
        '(dragstart)': 'onDragStart($event)',
        '(dragover)': 'onDragOver($event)',
        '(dragleave)': 'onDragLeave($event)',
        '(dragenter)': 'onDragEnter($event)',
        '(drop)': 'onDrop($event)'
    }
})
export class DraggableDirective {

    constructor(el: ElementRef) {
        el.nativeElement.setAttribute('draggable', 'true');
    }

    onDragStart(ev: DragEvent) {
        console.log("Drag Started");
        ev.dataTransfer.setData('Text', 'Data from drag start');
    }

}

și aici este codul directivei pentru ținta de tragere:

import {Directive, ElementRef} from '@angular/core';

@Directive({
    selector: '[dragTarget]',
    host: {
        '(dragover)': 'onDragOver($event)'
    }
})
export class DragTargetDirective {

    onDragOver(ev: DragEvent) {
        console.log("dragged over target" + ev.dataTransfer.getData('Text'));
    }

}

și în cele din urmă aici este html-ul care conține ambele directive

<div class="relativeContainer">
    <div class="absoluteBox" *ngFor="let process of processes" [ngClass]="{'active': process.active}">
    <div class="process-title">{{process.stage}} - {{process.name}}</div>
    <div dragTarget *ngIf="process.options" class="process-selection">{{process.options[process.selectedOption]}}</div>
    <ul class="option-list">
        <li myDraggable *ngFor="let option of process.options" class="option-item"><p>{{option}}</p></li>
    </ul>
</div>

De asemenea, am metadata pentru componenta cu directivele importate și declarate aici

import {DraggableDirective, DragTargetDirective} from '../draggable';

@Component({
    templateUrl: 'app/dashboard/dashboard.component.html',
    styleUrls: [require('./dashboard.component.scss')],
    directives: [DraggableDirective, DragTargetDirective]
})

Răspuns #1

Am crezut că voi veni și voi completa această întrebare - foloseam funcția de gestionare a evenimentului greșită - încercarea de a obține datele din evenimentul de dragover era ceva ce nu intenționam să fac.

Funcția ondrop a fost cea potrivită de utilizat și a funcționat exact așa cum mă așteptam.