4

以下のようなマークアップがあり、「some_row」TR を非表示にしようとしています。

<div id="sortable">
<table>
    <tr><td>Some Title 1</td></tr>
    <tr class="some_row"><td><textarea ...></td><tr>
</table>    
<table>
    <tr><td>Some Title 2</td></tr>
    <tr class="some_row"><td><textarea ...></td><tr>
</table>
</div>

これが私が試したことです：

$(function () {
    $("#sortable")
    .sortable({
        helper: function (e, o) {
            o.find("#some_row").hide();
            return o;
        },
        start: function () {
            $(".some_row").hide();
        },
        stop: function () {
            $(".some_row").show();
        }
    })
    .disableSelection();
});

最初はただstartのstopイベントから始めましhelperたが、選択した行のクローンであると推測しているため、隠した some_row div が同じ高さであったため、追加しました。

とにかく、上記はスタイルに関しては完全に機能しますが、ウィジェットは周囲の div の元の高さをまだ考慮しているようです。

この考えを救うために私にできることはありますか？

4

1 に答える 1

1

.somerowヘルパーが返される前に 非表示を呼び出す必要があります。

ヘルパーは、元の div のクローンであり、ドラッグされているものです。したがって、行を非表示にすると、クローンはすでに作成されています。

開始後に実行される更新は、並べ替え可能なオブジェクトを再読み込みして、新しい高さに合わせて調整するために行われます。

フィドルの例

$(function () {
$("#sortable")
.sortable({
    cursor: 'move',
    cursorAt: { left: 0, top: 10 },
    helper: function (e, o) {
        $(".some_row").hide();
        o.find("#some_row").hide();
        return o;
    },
    start: function () {
        $( "#sortable" ).sortable( "refresh" );
    },
    stop: function () {
        $(".some_row").show();
    }
})
.disableSelection();
});

また、ドラッグ時のカーソル位置 (ヘルパーに相対的) と、 jqueryui sortable apicursorのおよびcursorAtオプションを使用してホバリングしたときに表示されるカーソルの種類を定義できます。

于 2012-11-19T18:25:24.013 に答える