title: Drag event not firing with angular 2
body: <p>I have a canvas and I want users to be able to drag graphic elements around it. Thus, I don't want the canvas itself to drag, but I want to handle dragstart, drag, and drop events when the mouse does those things.</p>
  
  <p>I'm using Angular 2, so I have:</p>
  
  <pre><code>&lt;!-- editor.component.html --&gt;
  &lt;div #rendererContainer
    draggable="true"
    (dragstart)="onDragStart($event)"
    (drag)="onDrag($event)" 
    (dragover)="onDrag($event)" 
    (drop)="onDragEnd($event)"
    (dragend)="onDragEnd($event)"&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p>Then in editor.component.ts:</p>
  
  <pre><code>onDragStart(event) {
    console.log(`starting`);
    event.preventDefault();
  }
  
  onDrag(event) {
    console.log('dragging');
    event.preventDefault();
  }
  
  onDragEnd(event) {
    console.log('drag end');
    event.preventDefault();
  }
  </code></pre>
  
  <p>When I try dragging something, I get <code>starting</code> printed in the console, but that's it.  How do I get the other drag events to fire? Do I have to roll my own dragging from mousedown/move/up events?</p>
  
  <p>Stand-alone example on <a href="https://stackblitz.com/edit/angular-qqwkmq" rel="noreferrer">stackblitz</a>.  I want "dragging" the div around to fire dragstart/drag/drop events, but it only fires the starting one.</p>