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>

表#sleableable中的每个tr都是可拖动的。当它被拖动时，我想在每个 tr.draggable_item中的表中隐藏tbody。

以下是我初始化可排序的方法：

$( 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();
    });

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

1 个答案: