title: html5: dragging a tr into another table
body: <p>I'm trying to drag a <code>tr</code> into another <code>table</code>.</p>
  
  <p>Console is throwing <code>Uncaught ReferenceError: allowDrop is not defined</code>. I'm unsure why this is.</p>
  
  <p>Fiddle: <a href="http://jsfiddle.net/vm24va91/" rel="nofollow">http://jsfiddle.net/vm24va91/</a></p>
  
  <pre><code>&lt;div class="data"&gt;
      &lt;table&gt;
          &lt;tbody ondrop="drop(event)" ondragover="allowDrop(event)"&gt;
              &lt;tr id="1" draggable="true" ondragstart="drag(event)"&gt;
                  &lt;td&gt;One&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr id="2" draggable="true" ondragstart="drag(event)"&gt;
                  &lt;td&gt;Two&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr id="3" draggable="true" ondragstart="drag(event)"&gt;
                  &lt;td&gt;Three&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
      &lt;table&gt;
          &lt;tbody ondrop="drop(event)" ondragover="allowDrop(event)"&gt;
              &lt;tr id="4" draggable="true" ondragstart="drag(event)"&gt;
                  &lt;td&gt;Four&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr id="5" draggable="true" ondragstart="drag(event)"&gt;
                  &lt;td&gt;Five&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr id="6" draggable="true" ondragstart="drag(event)"&gt;
                  &lt;td&gt;Six&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  
  
  function allowDrop(ev) {
      ev.preventDefault();
  }
  
  function drag(ev) {
      ev.dataTransfer.setData("Text", ev.target.id);
  }
  
  function drop(ev) {
      ev.preventDefault();
      var data = ev.dataTransfer.getData("Text");
      ev.target.appendChild(document.getElementById(data));
  }
  </code></pre>