A resposta selecionada aqui é uma solução muito boa, mas tem um bug grave que é aparente no violino JS original ( http://jsfiddle.net/bgrins/tzYbU/ ): tente arrastar a linha mais longa ( Deus o abençoe, senhor) (Água de rosas ) e o restante das larguras das células colapsam.
Isso significa que corrigir as larguras das células na célula arrastada não é suficiente - você também precisa corrigir as larguras na tabela.
$(function () {
$('td, th', '#sortFixed').each(function () {
var cell = $(this);
cell.width(cell.width());
});
$('#sortFixed tbody').sortable().disableSelection();
});
JS Fiddle: http://jsfiddle.net/rp4fV/3/
Isso corrige o problema do recolhimento da tabela depois que você arrasta a primeira coluna, mas introduz uma nova: se você alterar o conteúdo da tabela, os tamanhos das células serão corrigidos.
Para contornar isso ao adicionar ou alterar o conteúdo, você precisa limpar as larguras definidas:
$('td, th', '#sortFixed').each(function () {
var cell = $(this);
cell.css('width','');
});
Adicione seu conteúdo e corrija as larguras novamente.
Essa ainda não é uma solução completa, pois (especialmente com uma tabela) você precisa de um espaço reservado para soltar. Para isso, precisamos adicionar uma função no início que construa o espaço reservado:
$('#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/