// Quando la pagina รจ caricata definisci l'ordine attuale e gli elementi da riordinare
$(document).ready(function () {
$("#lista_ordinata").sortable({ //definisco il contenitore di elementi da riordinare
handle: '.drag', //definisco con la classe .trascinabile quali sono gli elementi trascinabili
helper: function (e, tr) { //mantiene la larghezza del tr durante il trascinamento
var $originals = tr.children();
var $helper = tr.clone();
$helper.children().each(function (index) {
$(this).width($originals.eq(index).width())
});
return $helper;
},
update: function () { //aggiorno l'ordine ed eseguo una callback
var ordina = $('#lista_ordinata').sortable('serialize');
$("#risultato").html(ordina);
//$("#risultato").load("pagina_destinazione.asp?" + ordina); //oggettoItem[]
}
});
});
<table>
<tr>
<td>colonna 1</td>
<td>colonna 2</td>
<td>colonna 3</td>
</tr>
<tbody id="lista_ordinata">
<tr id="oggettoItem_1">
<td class="drag" nowrap="nowrap"><b>DRAG & DROP</b></td>
<td nowrap="nowrap">Michele</td>
<td nowrap="nowrap">Giocatore di basket</td>
</tr>
<tr id="oggettoItem_2">
<td class="drag" nowrap="nowrap"><b>DRAG & DROP</b></td>
<td nowrap="nowrap">Marco</td>
<td nowrap="nowrap">Giocatore di calcio</td>
</tr>
<tr id="oggettoItem_3">
<td class="drag" nowrap="nowrap"><b>DRAG & DROP</b></td>
<td nowrap="nowrap">Roberto</td>
<td nowrap="nowrap">Giocatore di bocce</td>
</tr>
</tbody>
</table>
<div id="risultato"></div>
table {border-collapse:collapse;}
tr {padding:10px;}
td {padding:5px;border:solid 1px #ddd;}
#risultato {padding:10px;color:#00AA00;}
.drag:hover {cursor:move}
External resources loaded into this fiddle: