使用嵌套表对 tr 元素进行排序，在排序时隐藏嵌套的 tbody

Question

我有一组...非常...嵌套的表格。

这是我的 DOM：

<table id="sortable">
    <thead>...</thead>
    <tbody>
        <tr class="draggable_item">
            <td>
                <table>
                    <thead class="show_this_while_dragging">...</thead>
                    <tbody class="hide_this_while_dragging">
                        <tr>
                            <td>...</td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>

table#sortable 中的每个 tr 都是可拖动的。当它被拖动时，我想将 tbody 隐藏在 each tr.draggable_item 内的表格中。

这是我如何初始化我的 sortable：

$( selector ).sortable({
    helper: fixHelper
});

$( selector ).sortable( "option", "start", function(event, ui) { start_callback(selector) } );

function start_callback(selector)
{
    $(selector + " table tbody").hide();
}

这几乎可以按预期工作。每个 tbody 都消失了，即使是被拖动的那个。但是 tbody 在当前拖动的项目中还有额外的空间。

我不确定是什么原因造成的，或者如何移除它。一旦我开始拖动项目，正在拖动的 tr.draggable_item 的高度就会被锁定。

Answer 1

jsFiddle Demo

首先我想说的是，很明显，你真的很努力自己寻找解决方案，所以我真的很想帮忙。

问题是，如果在元素开始拖动后隐藏部分元素，则不会重新计算大小。

解决方案就像您链接的代码一样。您必须捕获一个更初步的事件（如 mousedown）并在拖动开始之前将其隐藏。

$('tr.draggable_item').mousedown(function() {
       $(this).find("tbody").hide();
    });
$('tr.draggable_item').mouseup(function() {
       $(this).find("tbody").show();
    });