拖放时，表和其行的宽度会发生变化，以重新排列其行 [英] A table and its rows gets changed in width when dragging and dropping to reorder its rows

问题描述

我发现这个帖子是非常有帮助的：

我想要一张表，让我可以拖放来重新排列它的行。 p>

重新排列HTML表格使用拖放的行

在这篇文章中给出了一个解决方案，其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（）; 
  

然而，在我看来，解决方案没有完全正常运行。如果你拖动上帝保佑你，罗斯沃特先生一行，你知道我在说什么。

是否可以修复？

谢谢。

解决方案

这是因为宽度是动态更新的。如果您找到最广泛的< 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/

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.

解决方案

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/

这篇关于拖放时，表和其行的宽度会发生变化，以重新排列其行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！