0

私はこのhtmlマークアップを持っています:

<ul id="sortable1" class="connectedSortable">
    <li class="ui-state-default">Item 1</li>
    <li class="ui-state-default">Item 2</li>
    <li class="ui-state-default">Item 3</li>
    <li class="ui-state-default">Item 4</li>
    <li class="ui-state-default">Item 5</li>
</ul>

<ul id="sortable2" class="connectedSortable">
    <li class="ui-state-highlight">Drop item here</li>
</ul>

少なくとも 1 つの項目が #sortable1 から #sortable2 にドロップされた場合、クラス "hide" を次の場所に追加したいと思います。

<li class="ui-state-highlight">Drop item here</li>

この「プレースホルダー」は現在役に立たないため、それを非表示にするためだけに、次のようになります。

<ul id="sortable2" class="connectedSortable">
    <li class="ui-state-highlight hide">Drop item here</li>
</ul>

次に、すべてのアイテムが #sortable2 から #sortable1 にドロップされた場合、クラスhideを再度削除して、「プレースホルダー」を表示する必要があります。

何かアイデアはありますか?ありがとうございました!

4

1 に答える 1

0

はい、わかった...

<ul id="sortable2" class="connectedSortable">
    <li class="ui-state-highlight placeholder">Drop item here</li>
</ul>

...

$('#sortable2').sortable({
    items: 'li:not(.placeholder)',
    connectWith: '.connectedSortable',
    update: function(){
        var placeholder = $(this).children('.placeholder');
        ($(this).children().length > 1) ? placeholder.hide() : placeholder.show();
    }
}).disableSelection();
于 2013-03-26T11:12:16.457 に答える