jquery - 使用嵌套表对 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 内的表格中。

这是我初始化可排序的方法:

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

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

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

这几乎按预期工作。每个人都消失了，甚至是被拖着的那个。但是当前拖动的项目中的 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();
    });