¿Cómo usar jquery sortable para ordenar una lista de tablas? - javascript, jquery, orden, arrastrables, jquery-ui-sortable

Así que tengo muchas filas de tablas donde cada una pertenecea un grupo diferente, lo que quiero tener es que cada fila que pertenezca al mismo grupo esté en una tabla diferente, y se pueda ordenar dentro de esta tabla (que es fácil de hacer), pero también quiero esas tablas de grupos para poder clasificarse y arrastrar todo tabla y reordenarla dentro de esas otras tablas ..

Intenté hacer una tabla clasificable principal que tenga las tablas de grupos dentro que contengan los registros clasificables.

Aquí hay una ilustración de lo que quiero decir

Table 1
-----------------------------
Field 1 | Field 2 | Filed 3 |
-----------------------------
R1C1    | R1C2    | R1C3    |
-----------------------------
R2C1    | R2C2    | R2C3    |
-----------------------------

Table 2
-----------------------------
Field 1 | Field 2 | Filed 3 |
-----------------------------
R1C1    | R1C2    | R1C3    |
-----------------------------
R2C1    | R2C2    | R2C3    |
-----------------------------

Aquí esas tablas (Tabla 1 y Tabla 2) pueden intercambiarse (reordenarse) e incluir todo su contenido, por supuesto.

¡Muy agradecido!

Respuestas

Una solución simple es envolver las tablas individuales en un div y agregar un handle elemento para el div. Supongo que está utilizando jQueryUI clasificable que tiene un handle opción para arrastrar y ordenar

HTML:

<uL>
<li>
<div>
<div class="handle"></div>
<table> </table>
</div>
</li>
</ul>

jQuery:

$("table").sortable({items:"tr"});
$("ul").sortable({
items:"li",
handle:".handle"
});

MANIFESTACIÓN: http://jsfiddle.net/fYx4D/1/