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 はドラッグ可能です。ドラッグ中は、各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 の高さは、アイテムのドラッグを開始するとすぐにロックされます。

4

1 に答える 1

2

jsFiddle Demo

最初に言っておきたいのは、あなたが自分で解決策を見つけることに本当に力を注いでいることが明らかだったので、本当に助けたいと思ったということです。

問題は、ドラッグを開始した後に要素の一部を非表示にすると、サイズが再計算されないことです。

解決策は、リンクしたコードのようなものです。より予備的なイベント (マウスダウンなど) をキャッチし、ドラッグが始まる前に非表示にする必要があります。

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