title: Can table rows be made draggable?
body: <p>I have two divs that are float:left:</p>
  
  <pre><code>&lt;div id="inventor"&gt;
  &lt;table&gt;
  &lt;tr id="1"&gt;&lt;td&gt;Alexander Graham Bell&lt;/td&gt;&lt;/tr&gt;
  &lt;tr id="2"&gt;&lt;td&gt;Thomas Edison&lt;/td&gt;&lt;/tr&gt;
  &lt;tr id="3"&gt;&lt;td&gt;Nicholas Tesla&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  &lt;form&gt;
      &lt;div id="invention"&gt;
          &lt;table&gt;
          &lt;tr&gt;&lt;td&gt;&lt;input name="answer1" /&gt;Tesla coil&lt;/td&gt;&lt;td&gt;Explanation&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;&lt;input name="answer2" /&gt;Telephone&lt;/td&gt;&lt;td&gt;Explanation&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;&lt;input name="answer3" /&gt;Phonograph&lt;/td&gt;&lt;td&gt;Explanation&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;&lt;input name="answer4" /&gt;Light bulb&lt;/td&gt;&lt;td&gt;Explanation&lt;/td&gt;&lt;/tr&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>and I want to be able to drag the inventor over to the invention.</p>
  
  <pre><code>$("#inventor tr").draggable({
      revert: "valid"
  });
  
  $("#invention tr").droppable({
      drop: function(event, ui) {
          var inventor = ui.draggable.text();
          $(this).find("input").val(inventor);
      }
  });
  </code></pre>
  
  <p>I was able to get this working with list elements, but now that I'm adding an explanation to the invention table, I'd like to use a table on the left-hand side for styling purposes.</p>