A table and its rows gets changed in width when dragging and dropping to reorder its rows

问题

I would like to have a table which allows me to drag and drop to reorder its rows in it.

I found this SO post is very helpful:

Reorder HTML table rows using drag-and-drop

One solution was given in this post and its jsfiddle example is here: http://jsfiddle.net/pmw57/tzYbU/205/

Here is its 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();

However, it appears to me that the solution is not fully working. If you drag the "God Bless You, Mr. Rosewater" row, you know what I am talking about.

Is this fixable?

Thanks.

回答1:

That is because the width is updated dynamically. If you find the widest <td> title element and then set all the <td> title elements to that width you won't have the problem where the table re sizes on you.

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);

Example:

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

来源：https://stackoverflow.com/questions/23068789/a-table-and-its-rows-gets-changed-in-width-when-dragging-and-dropping-to-reorder