我正在我的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]
})
