Can table rows be made draggable?

Answer 1

A simpler solution based on Simen's demo: http://jsfiddle.net/UBG9n/927

There is no need for reference to the tr we have dragged, because jQueryUI offers ui.draggable and ui.helper which we can use to clean up dragged element and a helper:

    $(ui.draggable).remove();
    $(ui.helper).remove();`

Answer 2

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

Answer 3

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/