jQuery UI可以用表格和tr的宽度sorting
我正在使用jQuery UIsorting，使我的表网格sorting。 代码似乎工作正常，但因为我没有添加宽度的td s，当我拖动tr缩小内容。
例如; 如果我的表格行是500px，当我开始拖动，它变成300px。 我认为这是因为在网格中没有定义宽度。 那是因为我使用了两个课程（ fix和liquid ）。
fix类使td等于内容宽度， liquid使td宽度达到100％。 这是我的网格表的方法，而不必分配宽度td s。
任何想法如何使我的方法sorting工作？
我在这里find了答案。
我稍微修改它来克隆行，而不是增加原来的宽度：
helper: function(e, tr) { var $originals = tr.children(); var $helper = tr.clone(); $helper.children().each(function(index) { // Set helper cell sizes to match the original sizes $(this).width($originals.eq(index).width()); }); return $helper; },
我认为这可以帮助：
.ui-sortable-helper { display: table; }
这里select的答案是一个非常好的解决scheme，但它有一个严重的错误，这是显而易见的原始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',''); });
然后添加你的内容，然后再修正宽度。
这仍然不是一个完整的解决scheme，因为（特别是对于一个表），你需要一个放置占位符。 为此，我们需要在开始时添加一个构build占位符的函数：
$('#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/
这似乎克隆行在IE8上不能正常工作，但原来的解决scheme。
testing与jsFiddle 。
当你的表已经准备好sorting时，调用下面的代码，这将确保你的td元素具有固定的而不破坏表结构。
$(".tableToSort td").each(function () { $(this).css("width", $(this).width()); });
基思'的解决scheme是好的，但在Firefox中产生了一点破坏，没有加起来的集体，但引导他们。 （老jsstring型膝盖疼痛）
取代这一行：
cellCount += colspan;
有：
cellCount += colspan-0;
解决了这个问题。 （因为js被迫将variables视为数字而不是string）
戴夫·詹姆斯·米勒的答案为我工作，但由于我的网页上的容器div的布局，拖动鼠标光标的助手是偏离我的鼠标的位置。 为了解决这个问题，我把下面的代码添加到了helpercallback中
$(document.body).append($helper);
这里是完整的callback与上面的行添加：
helper: function (e, tr) { var $originals = tr.children(); var $helper = tr.clone(); $helper.children().each(function (index) { // Set helper cell sizes to match the original sizes $(this).width($originals.eq(index).width()); }); // append it to the body to avoid offset dragging $(document.body).append($helper); return $helper; }
我会添加这个作为评论戴夫的答案，但我没有足够的代表这个帐户。
看起来像disableSelection() – 方法是坏的，现在不推荐使用。 在Mozilla Firefox 35.0我无法在可sorting的行内使用文本input。 这只是不可重点。
将sorting应用到表的tbody元素，并设置助手为“克隆”，如jquery-ui的API中所述
$("$my-table-tbody").sortable({ helper: "clone" });
