拖放以重新排列其行时，表格及其行的宽度会发生变化

Question

我想要一个表格，允许我拖放以重新排列其中的行。

我发现这篇 SO 帖子很有帮助：

Reorder HTML table rows using drag-and-drop

这篇文章给出了一个解决方案，它的 jsfiddle 示例在这里：http://jsfiddle.net/pmw57/tzYbU/205/

这是它的 Javascript：

var fixHelperModified = function(e, tr) {
    var $originals = tr.children();
    var $helper = tr.clone();
    $helper.children().each(function(index) {
        $(this).width($originals.eq(index).width())
    });
    return $helper;
},
    updateIndex = function(e, ui) {
        $('td.index', ui.item.parent()).each(function (i) {
            $(this).html(i + 1);
        });
    };

$("#sort tbody").sortable({
    helper: fixHelperModified,
    stop: updateIndex
}).disableSelection();

但是，在我看来，该解决方案并未完全奏效。如果你拖动“God Bless You, Mr. Rosewater”这一行，你就知道我在说什么了。

这可以修复吗？

谢谢。

Answer 1

那是因为宽度是动态更新的。如果您找到最宽的 <td> 标题元素，然后将所有 <td> 标题元素设置为该宽度，您就不会有表格重新调整大小的问题。

var maxWidth = 0;
$('#sort td:nth-child(3)').each(function(){
    if(maxWidth < $(this).width())
        maxWidth = $(this).width();
});

$('#sort td:nth-child(3)').css('width',maxWidth);

例子：

http://jsfiddle.net/trevordowdle/2Sg8v/