Estou tentando implementar uma diretiva de arrastar e soltar personalizada. Funciona, mas é extremamente lento e acho que a lentidão pode ser rastreada para o Angular 2 porque nunca encontrei essa lentidão antes. A lentidão ocorre apenas quando eu anexo um ouvinte de evento aodragover oudrag eventos (ou seja, os eventos enviados com frequência), mesmo que eu não faça nada além de retornarfalse neles.

Aqui está o meu código de diretiva:

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;
    }
}

Aqui está o trecho relevante da folha de estilos:

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

Como você pode ver, tudo o que estou fazendo é destacar o elemento que está sendo arrastado em amarelo. E funciona rápido quando eu não manuseio odragover evento, porém eudevo manuseie-o para apoiar a queda. Quando eu manuseio odragover evento, tudo diminui para níveis insuportáveis !!

EDITAR Estou usando o beta angular 2.0.0-beta.8

EDIT # 2 Eu tentei criar um perfil do código usando o criador de perfil do chrome, estes são os resultados:

Olhe para a linha marcada, é estranhamente suspeito ...

EDIT # 3 Encontrou o problema: era realmente devido à detecção de alterações do Angular 2. A operação de arrastar e soltar no meu caso é feita em uma página muito densa, com muitas ligações e diretivas. Quando eu comentei tudo, exceto a lista fornecida, ela funcionou rapidamente novamente ... Agora, preciso da sua ajuda para encontrar uma solução para isso!

EDIT # 4 RESOLVIDO

O problema era realmente a detecção de alterações, mas a falha não estava no código da Angular, mas nas minhas ligações ineficientes. Eu tinha muitas ligações desse tipo:

*ngFor="#a of someFunc()"

Isso fez com que Angular não tivesse certeza se os dados foram alterados ou não, e a funçãosomeFunc estava sendo chamado repetidamente, mesmo que os dados não fossem alterados durante o processo de arrastar e soltar. Alterei essas ligações para se referir a propriedades simples na minha classe e movi o código que as preenche onde deveria estar. Tudo começou a se mover relâmpago rápido novamente!

Obrigado!