Выбранный здесь ответ является действительно хорошим решением, но в нем есть одна серьезная ошибка, которая проявляется в оригинальной скрипке JS ( http://jsfiddle.net/bgrins/tzYbU/ ): попробуйте перетащить самую длинную строку ( Бог благословит вас, мистер Розовая вода ), а остальные клетки шириной коллапсируют.
Это означает, что фиксации ширины ячейки на перетаскиваемой ячейке недостаточно - вам также необходимо зафиксировать ширину таблицы.
$(function () {
$('td, th', '#sortFixed').each(function () {
var cell = $(this);
cell.width(cell.width());
});
$('#sortFixed tbody').sortable().disableSelection();
});
JS Fiddle: http://jsfiddle.net/rp4fV/3/
Это решает проблему свертывания таблицы после перетаскивания первого столбца, но вводит новый: если вы измените содержимое таблицы, размеры ячеек теперь будут фиксированными.
Чтобы обойти это при добавлении или изменении содержимого, вам необходимо очистить установленную ширину:
$('td, th', '#sortFixed').each(function () {
var cell = $(this);
cell.css('width','');
});
Затем добавьте свой контент, затем снова установите ширину.
Это все еще не полное решение, так как (особенно с таблицей) вам нужен заполнитель для удаления. Для этого нам нужно добавить функцию при запуске, которая создает заполнитель:
$('#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/