Ich versuche, eine benutzerdefinierte Drag & Drop-Anweisung zu implementieren. Es funktioniert, ist aber extrem langsam und ich denke, die Langsamkeit kann auf Angular 2 zurückgeführt werden, da ich diese Langsamkeit noch nie zuvor erlebt habe. Die Langsamkeit tritt nur auf, wenn ich einen Ereignis-Listener an das @ anhängdragover oderdrag Ereignisse (d. h. die Ereignisse, die häufig gesendet werden), auch wenn ich nichts anderes tue, als @ zurückzugebfalse in ihnen

Hier ist mein Anweisungscode:

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

Hier ist der entsprechende Stylesheet-Auszug:

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

Wie Sie sehen können, hebe ich nur das Element hervor, über das gelb gezogen wird. Und es funktioniert schnell, wenn ich mit dem @ nicht klarkomdragover Event, aber ichMus handhaben, um das Ablegen zu unterstützen. Wenn ich mit dem @ fertig bdragover Event, alles verlangsamt sich auf ein unerträgliches Niveau !!

BEARBEITE Ich benutze eckige Beta 2.0.0-Beta.8

EDIT # 2 Ich habe versucht, den Code mit dem Chrome-Profiler zu profilieren. Dies sind die Ergebnisse:

Blick auf die markierte Linie, es ist seltsamerweise verdächtig ...

EDIT # 3Fand das problem: es lag ja an der angular 2 änderungserkennung. Die Drag & Drop-Operation wird in meinem Fall auf einer sehr dichten Seite mit vielen Bindungen und Direktiven ausgeführt. Als ich alles bis auf die angegebene Liste auskommentiert habe, hat es wieder schnell geklappt ... Jetzt brauche ich Ihre Hilfe, um eine Lösung dafür zu finden!

EDIT # 4 Gelöst

Das Problem war zwar die Änderungserkennung, aber der Fehler lag nicht an Angulars Code, sondern an meinen eigenen ineffizienten Bindungen. Ich hatte viele Bindungen dieser Art:

*ngFor="#a of someFunc()"

Dies führte dazu, dass Angular unsicher war, ob sich Daten geändert haben oder nicht, und die FunktionsomeFunc wurde immer wieder aufgerufen, obwohl sich die Daten während des Drag & Drop-Vorgangs nicht geändert haben. Ich habe diese Bindungen geändert, um auf einfache Eigenschaften in meiner Klasse zu verweisen, und den Code, der sie auffüllt, an die Stelle verschoben, an der er sein sollte. Alles begann sich wieder blitzschnell zu bewegen!

Vielen Dank