title: Angular 2 drag and drop directive extremely slow
body: <p>I am trying to implement a custom drag and drop directive. It works, but it is extremely slow, and I think the slowness can be tracked to Angular 2 because I've never encountered this slowness before. The slowness only occurs when I attach an event listener to the <code>dragover</code> or <code>drag</code> events (i.e. the events which are sent frequently), even if I do nothing but return <code>false</code> in them.</p>
  
  <p>Here's my directive code:</p>
  
  <pre><code>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;
      }
  }
  </code></pre>
  
  <p>Here's the relevant style sheet excerpt:</p>
  
  <pre><code>.my-log.my-dragging-over {
      background-color: yellow;
  }
  </code></pre>
  
  <p>As you can see all I'm doing is highlighting the element being dragged over in yellow. And it works fast when I don't handle the <code>dragover</code> event, however I <strong>must</strong> handle it to support dropping. When I do handle the <code>dragover</code> event, everything slows down to unbearable levels!!</p>
  
  <p><strong>EDIT</strong> I am using angular beta 2.0.0-beta.8</p>
  
  <p><strong>EDIT #2</strong> I tried profiling the code using chrome's profiler, these are the results:</p>
  
  <p><img src="https://i.imgur.com/jd63pld.png" alt="Imgur"></p>
  
  <p>Look at the marked line, it is strangely suspicious...</p>
  
  <p><strong>EDIT #3</strong> Found the problem: it was indeed due to Angular 2's change detection. The drag and drop operation in my case is done on a very dense page with a lot of bindings and directives. When I commented out everything except the given list, it worked fast again... Now I need your help in finding a solution to this!</p>