How to drag table row and drop it in particular order

bahaa

i have two tables i want to drag row from one and drop it on another. The problem i have is: i want to sort each item in the right cell on the dropable table.

Here a capture you can se that when i drag and drop a row, it stays as an one row on the other table. i want that each word/item to be dropped on the right cell. OBS. the dropable tables cells contains textboxex, and there i want to drop the items


Here my Js code i have tested



$(function() {
$( "#t1" ).accordion();
$( "#t1 tr" ).draggable({
appendTo: "body",
helper: "clone"
});





$( "#t2 td" ).droppable({
activeClass: "ui-state-default",
hoverClass: "ui-state-hover",
accept: ":not(.ui-sortable-helper)",
drop: function( event, ui ) {
$( this ).find( ".placeholder" ).remove();
$( "" ).text( ui.draggable.text() ).appendTo( this );
}

}).sortable({
items: "tr:not(.placeholder)",
sort: function() {
// gets added unintentionally by droppable interacting with sortable
// using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
$( this ).removeClass( "ui-state-default" );
}
});
});