Drag and Drop table rows between tables with JQuery UI

I needed to create a web page that let the user assign one item of a grid to a target by dragging the item and dropping it on a row on a different grid. I immediately thought about using JQuery UI draggables and droppables but it didn’t work as expected.
After looking for a solution for some time I finally came to this post by David Petersen explaining how to provide a helper element to JQuery to wrap the floating row while dragging and it worked perfectly.

source.draggable({ helper: function(event) { return $('

') .find('table').append($(event.target).closest('tr').clone()).end(); }, appendTo: 'body' });

To prevent a table from accepting its own rows I used the accept option on the droppable function.

accept: source.selector

The result:

$(function(){ setupDragDrop($('#t1 tr'), $('#t2 tr')); setupDragDrop($('#t2 tr'), $('#t1 tr')); });

function setupDragDrop(source, target) { source.draggable({ helper: function(event) { return $('

') .find('table').append($(event.target).closest('tr').clone()).end(); }, appendTo: 'body' });

target.droppable({
    drop: function(event, ui) {
        alert('row dropped ' + $(this).text());
    },
    accept: source.selector
});

} ​

Working sample a jsbin.

Technorati Tags: JQuery,JQuery UI,Javascript