Angular2: Faire glisser des événements à l'aide de directives sur une ligne de table Fonctionne très lentement

Question

J'implémente la fonctionnalité de dragdrop à l'aide de directives.

@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"); 
    } 
} 
} 

Et j'utilise la directive sur les lignes de table,

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

Le problème est que, les événements de glisser des feux très lentement, comme vous pouvez le voir, je l'ai ajout et la suppression classes pour mettre en évidence les lignes sur dragEnter et DragLeave. La chose que j'ai eu est que la lenteur vient de la zone js de angular2, peut être le problème dans mon code ou le problème en angulaire.

Answer 1

Je pense que cela est causé par https://github.com/angular/angular/issues/6311

Il existe déjà un PR https://github.com/angular/angular/pull/8761