Angular2：使用表行上的指令拖动事件非常慢答案

【问题标题】：Angular2 : Drag Events Using Directives On Table Row Works Very SlowAngular2：使用表行上的指令拖动事件非常慢
【发布时间】：2016-05-24 08:31:23
【问题描述】：

我在指令的帮助下实现拖放功能。

@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 中的问题。

【问题讨论】：

标签： drag-and-drop angular angular2-directives slowdown angular-dragdrop

【解决方案1】：

我认为这是由https://github.com/angular/angular/issues/6311引起的

已经有 PR https://github.com/angular/angular/pull/8761

【讨论】：

我正在使用同步 EventEmitter :@Output() OnDrop = new EventEmitter(false);在我看来，与 EventEmitter 没有任何关系； dragevents 本身被延迟了。
我怀疑(dragover) 绑定也在幕后使用EventEmitter，默认为async。
我有同样的假设，所以我尝试了以下 ngOnInit() { this.el.nativeElement.addEventListener("dragenter", this.onDragEnter.bind(this)); this.el.nativeElement.addEventListener("dragover", this.onDragOver.bind(this)); this.el.nativeElement.addEventListener("dragleave", this.onDragLeave.bind(this)); this.el.nativeElement.addEventListener("drop", this.onDrop.bind(this)); }
ngOnDestroy() { this.el.nativeElement.removeEventListener("dragenter"); this.el.nativeElement.removeEventListener("dragover"); this.el.nativeElement.removeEventListener("dragleave"); this.el.nativeElement.removeEventListener("drop"); }
您可以尝试ChangeDetectionStrategy.OnPush 以避免在每个事件之后运行更改检测。