我在指令的帮助下实现拖放功能。
@Directive({
selector: '[Droppable]',
host:{
'(dragenter)':'onDragEnter($event)',
'(dragover)':'onDragOver($event)',
'(dragleave)':'onDragLeave($event)',
'(drop)':'onDrop($event)'
}
})
export class DragDropDirective {
@Input('Droppable') isDropable:boolean;
@Input() set doBoarderHighLight(decision:boolean) {
this._doBoarderHighLight = decision;
this._doBackgroundHighLight = !decision;
}
@Input() doBackgroundHighLight(decision:boolean) {
this._doBackgroundHighLight = decision;
this._doBoarderHighLight = !decision;
}
@Output() OnDrop = new EventEmitter(false);
_doBoarderHighLight:boolean = false;
_doBackgroundHighLight:boolean = true;
_isDropable:boolean = true;
el:ElementRef;
constructor(public _el:ElementRef) {
this.el = _el;
}
onDragOver(e:any) {
e.preventDefault();
}
onDragEnter(e:any) {
e.preventDefault();
e.stopPropagation();
if (this._doBoarderHighLight) {
this.el.nativeElement.addClass("drag-over");
this.el.nativeElement.addClass("highlight-border");
}
else {
this.el.nativeElement.addClass("drag-over");
this.el.nativeElement.addClass("highlight-background");
}
}
onDragLeave(e:any) {
e.preventDefault();
e.stopPropagation();
if (this._doBoarderHighLight) {
this.el.nativeElement.removeClass("drag-over");
this.el.nativeElement.removeClass("highlight-border");
}
else {
this.el.nativeElement.removeClass("drag-over");
this.el.nativeElement.removeClass("highlight-background");
}
}
onDrop(e:any) {
e.preventDefault();
e.stopPropagation();
Utils.nextEventIfExist(e, this.OnDrop);
if (this._doBoarderHighLight) {
this.el.nativeElement.removeClass("drag-over");
this.el.nativeElement.removeClass("highlight-border");
}
else {
this.el.nativeElement.removeClass("drag-over");
this.el.nativeElement.removeClass("highlight-background");
}
}
}
我在表格行上使用指令，
<tbody *ngFor="let row of rows;#i = index">
<tr [Droppable]="isDropableRow" (OnDrop)="OnDropRow($event)" [ngClass]="{'row-data':true,'active':row.isSelected,'disabled-row':!isEnabled(row)}" (click)="onRowClick($event,row)">
问题是，拖动事件触发非常缓慢，正如您所见，我已经添加和删除类以突出显示 dragEnter 和 DragLeave 上的行。
我得到的是缓慢来自 angular2 的 zone js，可能是我的代码中的问题或 angular 中的问题。