La réponse choisie ici est une très bonne solution, mais elle a un bug grave qui est apparent dans le violon JS original ( http://jsfiddle.net/bgrins/tzYbU/ ): essayez de faire glisser la ligne la plus longue ( God Bless You, Mr . Rosewater ), et le reste de la largeur des cellules s'effondre.
Cela signifie que la fixation des largeurs de cellule sur la cellule déplacée n'est pas suffisante - vous devez également fixer les largeurs sur le tableau.
$(function () {
$('td, th', '#sortFixed').each(function () {
var cell = $(this);
cell.width(cell.width());
});
$('#sortFixed tbody').sortable().disableSelection();
});
JS Fiddle: http://jsfiddle.net/rp4fV/3/
Cela résout le problème de la réduction du tableau après avoir fait glisser la première colonne, mais en introduit une nouvelle: si vous modifiez le contenu du tableau, les tailles de cellule sont maintenant fixées.
Pour contourner ce problème lors de l'ajout ou de la modification de contenu, vous devez effacer les largeurs définies:
$('td, th', '#sortFixed').each(function () {
var cell = $(this);
cell.css('width','');
});
Ajoutez ensuite votre contenu, puis corrigez à nouveau les largeurs.
Ce n'est toujours pas une solution complète, car (en particulier avec une table) vous avez besoin d'un espace réservé de dépôt. Pour cela, nous devons ajouter une fonction au démarrage qui construit l'espace réservé:
$('#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/