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