Я пытаюсь реализовать пользовательскую директиву перетаскивания. Это работает, но это очень медленно, и я думаю, что медлительность можно отследить до Angular 2, потому что я никогда раньше не сталкивался с этой медлительностью. Замедление происходит только тогда, когда я присоединяю слушателя события кdragover или жеdrag события (то есть события, которые часто отправляются), даже если я ничего не делаю, но возвращаюсьfalse в них.

Вот мой код директивы:

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

Вот соответствующая выдержка из таблицы стилей:

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

Как вы можете видеть, все, что я делаю, это выделение перетаскиваемого элемента желтым цветом. И это работает быстро, когда я не обращаюсьdragover событие, однако ядолжен справиться с этим, чтобы поддержать падение. Когда я справлюсь сdragover событие, все замедляется до невыносимых уровней !!

РЕДАКТИРОВАТЬ Я использую угловой бета 2.0.0-бета.8

РЕДАКТИРОВАТЬ № 2 Я попытался профилировать код с помощью профилировщика Chrome, вот результаты:

Посмотрите на отмеченную линию, это странно подозрительно ...

РЕДАКТИРОВАТЬ № 3 Обнаружил проблему: это действительно было связано с обнаружением изменений Angular 2. Операция перетаскивания в моем случае выполняется на очень плотной странице с большим количеством привязок и директив. Когда я закомментировал все, кроме данного списка, он снова работал быстро ... Теперь мне нужна ваша помощь в поиске решения этой проблемы!

РЕДАКТИРОВАТЬ # 4 решено

Проблема действительно заключалась в обнаружении изменений, но ошибка была не в коде Angular, а в моих собственных неэффективных привязках. У меня было много привязок такого рода:

*ngFor="#a of someFunc()"

Это заставило Angular быть неуверенным, изменились ли данные или нет, и функцияsomeFunc вызывали снова и снова, хотя данные не менялись в процессе перетаскивания. Я изменил эти привязки, чтобы они ссылались на простые свойства в моем классе, и переместил код, который заполняет их, туда, где он должен был быть. Все снова стало молниеносно!

Спасибо!