Множественный draggable для html таблицы

[ilyas->]

<table>
<tr>
<td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td>
</tr>
<tr>
<td></td><td></td><td></td><td></td>
</tr>
</table>

Здравствуйте! Мне нужно таблицу сортировать с помощью jquery ui, менять местами ячейки <td> в одной строке а потом менять местами строки <tr>, менять метсами можно только ячейки в одной строке так как у каждого ряда ячеек свой родитель строка

Пробовал вот таким методом
$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
}); с примеров ui http://jqueryui.com/sortable/#display-grid но будет работать либо сортировка строк или только ячейки все вместе не работает чтобы сперва менять местами строки а потом в строках ячейки

[ilyas->]

Подскажите как правильно сделать сортировку для строк и для ячеек, ячейки у меня перетаскиваются но не сохраняются в наведенное место скорее всего изза двойного вызова метода .sortable(); и для disableSelection();
$(function() {
$( "#sortable" ).sortable();
$( "#sortable" ).disableSelection();
$(function() {
$( "#sortable2" ).sortable();
$( "#sortable2" ).disableSelection();

[ilyas->]

Вот пример не сортируются строки http://jsfiddle.net/SuRUv/

[ilyas->]

Спасибо вопрос решен погуглил и нашел правильное применение
$(function() {
$( ".sortable1, .sortable2" ).sortable({
connectWith: ".connectedSortable"
}).disableSelection();
});

[ilyas->]

Здравствуйте!

после сортировки мне необходимо сделать кнопку получить разметку, вот например я отсортировал ячейки табдицы потом хочу скопировать html уже измененной разметки если в браузере нажму CTRL+U исходный код остается неизменным а я же сортировал ячейки, мне нужно чтобы после нажатия на кнопку получить код появлялось поле с измененной сортированной разметкой которую можно скопировать