2

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

这是我的 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 隐藏在每个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 都消失了，即使是被拖动的那个。但是 tbody 在当前拖动的项目中还有额外的空间。

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

4

1 回答 1

2

jsFiddle Demo

一开始我想说的是，很明显你真的很努力自己寻找解决方案，所以这真的让我想帮忙。

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

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

$('tr.draggable_item').mousedown(function() {
       $(this).find("tbody").hide();
    });
$('tr.draggable_item').mouseup(function() {
       $(this).find("tbody").show();
    });
于 2013-09-04T05:44:43.580 回答