Estoy tratando de implementar una directiva personalizada de arrastrar y soltar. Funciona, pero es extremadamente lento, y creo que la lentitud se puede rastrear hasta Angular 2 porque nunca antes había encontrado esta lentitud. La lentitud solo ocurre cuando adjunto un detector de eventos aldragover odrag eventos (es decir, los eventos que se envían con frecuencia), incluso si no hago nada más que regresarfalse en ellos.

Aquí está mi código de directiva:

import {Directive, ElementRef, Inject, Injectable} from 'angular2/core';

declare var jQuery: any;
declare var document: any;

@Directive({
    selector: '.my-log',
    host: {
        '(dragstart)': 'onDragStart($event)',
        '(dragover)': 'onDragOver($event)',
        '(dragleave)': 'onDragLeave($event)',
        '(dragenter)': 'onDragEnter($event)',
        '(drop)': 'onDrop($event)',
    }
})
@Injectable()
export class DraggableDirective {
    refcount = 0;
    jel;

    constructor( @Inject(ElementRef) private el: ElementRef) {
        el.nativeElement.setAttribute('draggable', 'true');
        this.jel = jQuery(el.nativeElement);
    }

    onDragStart(ev) {
        ev.dataTransfer.setData('Text', ev.target.id);
    }

    onDragOver(ev) {
        return false;
    }

    onDragEnter(ev) {
        if (this.refcount === 0) {
            this.jel.addClass('my-dragging-over');
        }
        this.refcount++;
    }

    onDragLeave(ev) {
        this.refcount--;
        if (this.refcount === 0) {
            this.jel.removeClass('my-dragging-over');
        }
    }

    onDrop(ev) {
        this.jel.removeClass('my-dragging-over');
        this.refcount = 0;
    }
}

Aquí está el extracto relevante de la hoja de estilo:

.my-log.my-dragging-over {
    background-color: yellow;
}

Como puede ver, todo lo que estoy haciendo es resaltar el elemento que se arrastra en amarillo. Y funciona rápido cuando no manejo eldragover evento, sin embargo yodebe manejarlo para soportar caídas. Cuando manejo eldragover evento, todo se ralentiza a niveles insoportables !!

EDITAR Estoy usando angular beta 2.0.0-beta.8

EDITAR # 2 Intenté perfilar el código usando el generador de perfiles de Chrome, estos son los resultados:

Mira la línea marcada, es extrañamente sospechoso ...

EDITAR # 3 Encontró el problema: de hecho se debió a la detección de cambios de Angular 2. La operación de arrastrar y soltar en mi caso se realiza en una página muy densa con muchos enlaces y directivas. Cuando comenté todo excepto la lista dada, funcionó rápido de nuevo ... ¡Ahora necesito su ayuda para encontrar una solución a esto!

EDICIÓN # 4 RESUELTO

El problema era la detección de cambios, pero la falla no estaba en el código de Angular, sino en mis propios enlaces ineficientes. Tuve muchos enlaces de este tipo:

*ngFor="#a of someFunc()"

Esto causó que Angular no estuviera seguro de si los datos han cambiado o no, y la funciónsomeFunc se llamaba una y otra vez a pesar de que los datos no cambiaban durante el proceso de arrastrar y soltar. Cambié estos enlaces para referirme a propiedades simples en mi clase, y moví el código que los completa donde se suponía que debía estar. ¡Todo comenzó a moverse a la velocidad del rayo otra vez!

¡Gracias!