La risposta selezionata qui è una soluzione davvero piacevole, ma ha un grave bug che è evidente nel violino JS originale ( http://jsfiddle.net/bgrins/tzYbU/ ): prova a trascinare la riga più lunga ( God Bless You, Mr Rosewater ) e il resto della larghezza delle celle crolla.
Ciò significa che il fissaggio delle larghezze di cella sulla cella trascinata non è sufficiente: è inoltre necessario correggere le larghezze sulla tabella.
$(function () {
$('td, th', '#sortFixed').each(function () {
var cell = $(this);
cell.width(cell.width());
});
$('#sortFixed tbody').sortable().disableSelection();
});
JS Fiddle: http://jsfiddle.net/rp4fV/3/
Questo risolve il problema del collasso della tabella dopo aver trascinato la prima colonna, ma ne introduce una nuova: se si modifica il contenuto della tabella, le dimensioni delle celle vengono ora corrette.
Per aggirare questo problema quando si aggiungono o si modificano contenuti, è necessario cancellare le larghezze impostate:
$('td, th', '#sortFixed').each(function () {
var cell = $(this);
cell.css('width','');
});
Quindi aggiungi i tuoi contenuti, quindi correggi di nuovo le larghezze.
Questa non è ancora una soluzione completa, poiché (soprattutto con una tabella) è necessario un segnaposto di rilascio. Per questo dobbiamo aggiungere una funzione all'avvio che crea il segnaposto:
$('#sortFixed tbody').sortable({
items: '> tr',
forcePlaceholderSize: true,
placeholder:'must-have-class',
start: function (event, ui) {
// Build a placeholder cell that spans all the cells in the row
var cellCount = 0;
$('td, th', ui.helper).each(function () {
// For each TD or TH try and get it's colspan attribute, and add that or 1 to the total
var colspan = 1;
var colspanAttr = $(this).attr('colspan');
if (colspanAttr > 1) {
colspan = colspanAttr;
}
cellCount += colspan;
});
// Add the placeholder UI - note that this is the item's content, so TD rather than TR
ui.placeholder.html('<td colspan="' + cellCount + '"> </td>');
}
}).disableSelection();
JS Fiddle: http://jsfiddle.net/rp4fV/4/