Angular2拖放目标

我正在我的angular2应用程序中实现一个拖放功能,就像这样…用户可以看到他们可以选择的选项列表和列表上方的放置区域 – 当他们从其中一个选项拖动到放下区域然后处理事件.

到目前为止,我有一个可拖动的指令来处理拖动启动事件,并在事件的dataTransfer属性上设置一些数据.我试图做的是创建另一个指令,它是一个dropTarget指令,它只处理drop事件并获取数据.

这是可以做的吗？我是否可以更好地为可拖动的div和drop区域使用相同的指令,并插入一些逻辑,只允许在div放在右侧目标上时发生drop事件.

谢谢

编辑：代码

这是我的draggable指令的代码：

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

}

这是拖动目标指令代码：

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

}

最后这里是包含两个指令的html

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

我还有组件的元数据,其中导入和声明了指令

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

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