Angular2 Drag & Drop-Ziel

Question

Ich bin ein Drag-und-Drop-Funktion in meiner angular2-Anwendung, die wie folgt funktioniert ... Ein Benutzer sieht eine Liste von Optionen, die sie wählen können und eine Drop-Zone über der Liste - wenn sie Ziehen Sie von einer der Optionen in die Drop-Zone, dann wird das Ereignis behandelt.

Bis jetzt habe ich eine ziehbare Direktive, die das Zieh-Start-Ereignis behandelt und einige Daten auf das DataTransfer-Attribut des Ereignisses setzt. Ich habe versucht, eine andere Direktive zu erstellen, die eine dropTarget-Direktive ist, die einfach das drop-Ereignis handhabt und die Daten ergreift.

Ist das möglich? Wäre es besser, wenn ich nur die selbe Direktive für die ziehbaren divs und die Drop-Zone benutze und eine Logik einfüge, die nur erlaubt, dass das drop-Ereignis stattfindet, wenn das div auf das richtige Ziel fällt.

Dank

EDIT: Code

Hier ist der Code für meine ziehbar Richtlinie:

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'); 
    } 

} 

und hier ist das Ziel Richtlinie drag Code:

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')); 
    } 

} 

und schließlich Hier ist der HTML-Code, der beide Direktiven

enthält

<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> 

Ich habe auch die Metadaten für die Komponente mit den Richtlinien eingeführt und erklärt hier

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

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

Answer 1

dachte, ich würde kommen und diese Frage abzuschließen - ich die falsche Event-Handler-Funktion wurde mit - Es war etwas, was ich nicht vorhatte zu versuchen, die Daten vom Ereignis auf Dragover zu bekommen.

Die Ondrop-Funktion war die richtige und genau so, wie ich es erwartet hatte.