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 $('<div class="drag-row"><table></table></div>')
.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.
The result:
$(function(){
setupDragDrop($('#t1 tr'), $('#t2 tr'));
setupDragDrop($('#t2 tr'), $('#t1 tr'));
});
function setupDragDrop(source, target) {
source.draggable({
helper: function(event) {
return $('<div class="drag-row"><table></table></div>')
.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.