Javascript jQuery UI可排序和表/单元格大小

我在使用jQueryUI的

可排序

时遇到问题

我有一个表，其中的行遵循以下结构：

<tr style="background-color: rgb(255, 192, 203);">
    <input type="hidden" name="MyElement.index" autocomplete="off" value="748d4196-c12d-4c61-94f5-ad1a15eb279b">
    <td style="background-color:red;">
        <input type="hidden" id="MyElement_748d4196-c12d-4c61-94f5-ad1a15eb279b__ID" name="MyElement[748d4196-c12d-4c61-94f5-ad1a15eb279b].ID" />
        <input type="hidden" ... />
        <a href="..."> ... </a>
    </td>
    <td style="background-color:green;">
        <a href="..."> ... </a>
    </td>
    <td style="text-align: right; vertical-align: middle; width: 12.5%; background-color: blue">
        <a class="cancel-new-element" href="#" onclick="$(this).parent().parent().remove(); return false;" style="vertical-align: middle; margin-right: 15px;">
            <img src="/Images/icon_remove.png" alt="Remove Row"></a>
    </td>
</tr>

所以

然而，我没有得到想要的效果，相反，当我拖动一行时，表会缩小一点，我可以看到被拖动的行的单元格并没有真正保持其精确的宽度

1） 这是表格（tr和td的背景已上色，以便更好地显示）：

2） 正在拖动最后一行。您可以看到，表格大小减小，td的宽度在拖动的行中发生变化。粉红色是该行的背景。

如果我没有使用

BeginCollectionItem

——我需要使用它才能成功发布我的ViewModel——我不会遇到同样的问题

我已尝试对我的

myHelper

函数进行了几次修改。包括从

$helper

对象中删除隐藏的

输入，但没有结果。
在这里找到了我的解决方案：（@Keith的答案）

然后重新调整宽度

最初的答案归功于

var myHelper = function (e, tr) {
    var $originals = tr.children();
    var $helper = tr.clone();
    $helper.children().each(function (index) {
        $(this).width($originals.eq(index).width())
    });
    return $helper;
};

// Fix the width of the cells
$('td, th', '#tableId').each(function () {
    var cell = $(this);
    cell.width(cell.width());
});

$('#tableBodyId').sortable({
    items: '> tr',
    forcePlaceholderSize: true,
    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 + '">&nbsp;</td>');
    }
}).disableSelection();

// Clear the fixed widths: 
$('td, th', '#sortFixed').each(function () {
    var cell = $(this);
    cell.css('width','');
});