Can table rows be made draggable?

Question

I have two divs that are float:left:

<div id="inventor">
<table>
<tr id="1"><td>Alexander Graham Bell</td></tr>
<tr id="2"><td>Thomas Edison</td></tr>
<tr id="3"><td>Nicholas Tesla</td></tr>
</table>
</div>
<form>
    <div id="invention">
        <table>
        <tr><td><input name="answer1" />Tesla coil</td><td>Explanation</td></tr>
        <tr><td><input name="answer2" />Telephone</td><td>Explanation</td></tr>
        <tr><td><input name="answer3" />Phonograph</td><td>Explanation</td></tr>
        <tr><td><input name="answer4" />Light bulb</td><td>Explanation</td></tr>
        </table>
    </div>
</form>

and I want to be able to drag the inventor over to the invention.

$("#inventor tr").draggable({
    revert: "valid"
});

$("#invention tr").droppable({
    drop: function(event, ui) {
        var inventor = ui.draggable.text();
        $(this).find("input").val(inventor);
    }
});

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.

Answer 1

Yes they can be, one way is the table row dnd plugin

Answer 2

This may do the trick. Changes:

• Wrapped the tr elements inside tbody
• Added a helper clone when dragging a tr. Only way I could make the dragging actually work. (Tell me if you don't want this (you want the tr to be removed from the table when you start dragging) and we'll see if we can find a solution)

The javascript. When the dragging starts, a clone is made (because of helper: "clone") and the c variable will holw reference to the clone and the tr being dragged. When the dragging stops, if it is outside a droppable, the clone is destroyed. If it is inside the draggable, we destroy the clone and the tr (so it is removed from the list and can't be dragged again)

//this will hold reference to the tr we have dragged and its helper
var c = {};

$("#inventor tr").draggable({
        helper: "clone",
        start: function(event, ui) {
            c.tr = this;
            c.helper = ui.helper;
        }
});


$("#invention tr").droppable({
    drop: function(event, ui) {
        var inventor = ui.draggable.text();
        $(this).find("input").val(inventor);

        $(c.tr).remove();
        $(c.helper).remove();
    }
});

The only new to the HTML is the wrapping of the trs inside tbody tags.

Here's a demo: http://jsfiddle.net/UBG9n/1/