title: Dragover issue in Meteor
body: <p>I've just started learning Meteor (and Templating). I really enjoy it so far. However, I'm running into a weird issue using HTML5 native drag n drop events on a table. Note that I'm <strong>not</strong> using jQuery events.</p>
  
  <p>I have a table with droppable <code>td</code> and draggable <code>elements</code>.</p>
  
  <p>So my <code>table</code> template looks like this:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;template name="table"&gt;
  &lt;table&gt;
    {{#each row}}
       &lt;tr&gt;
          {{#each col}}
             &lt;td&gt;
               {{#each elements}}
                 {{&gt;element}}
               {{/each}}
              &lt;/td&gt;
          {{/each}}
       &lt;/tr&gt;
     {{/each}}
  &lt;/table&gt;
  &lt;/template&gt;
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>Template.tasktable.events({
    'dragover td': function(evt) {
      evt.preventDefault();
    },
    'drop td': function(evt) {
      evt.preventDefault();
      var id = evt.dataTransfer.getData('Text');
      Collection.update({_id: id}, {$set: {value: this.value}});
    }
  });
  </code></pre>
  
  <p>Then my <code>element</code> template looks like this:</p>
  
  
  
  <pre class="lang-html prettyprint-override"><code>&lt;template name="element"&gt;
    &lt;div draggable="true"&gt;{{value}}&lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <pre class="lang-js prettyprint-override"><code>Template.element.events({
    'dragstart': function(evt, tmpl) {
       evt.dataTransfer.setData('Text', this._id);
    }
  });
  </code></pre>
  
  <p>For some reason that is melting my brain, the <code>drag over</code> event is being followed by a <strong>rendering</strong> event, as you can see on the dev tool image here: <a href="http://cl.ly/image/3O1S2d1j1f1a" rel="nofollow">http://cl.ly/image/3O1S2d1j1f1a</a></p>
  
  <p>This is extremely painful as <code>dragover</code> is being fired a <strong>lot</strong> and subsequently the <code>drop</code>event is queued after several seconds. I have no idea where that comes from, it looks like <strong>domutils.js</strong> is being called.</p>
  
  <p>Hope I'm clear enough.</p>
  
  <p>Thanks so much.</p>
  
  <h2>EDIT</h2>
  
  <p>I managed to prevent the rendering event to appear, by removing the <code>dragover</code> event from the <code>Template events</code> and adding</p>
  
  <p><code>$(document).on('dragover', 'td', function(evt) {evt.preventDefault();})</code></p>
  
  <p>which is jQuery but doesn't get caught by domutils.js or listeners.js from Meteor.</p>