这里选择的答案是一个非常好的解决方案,但是它有一个严重的错误,这在原始的JS小提琴(http://jsfiddle.net/bgrins/tzYbU/)中很明显:尝试拖动最长的行(上帝保佑您,先生(Rosewater),其余单元格宽度会崩溃。
这意味着仅固定所拖动单元格上的单元格宽度是不够的-您还需要固定表格上的宽度。
$(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/