3

6つのアイテムを含む2つのリストがあり、次のクラスに接続されてい.connectedSortableます。2つのリスト間でアイテムを移動すると、ターゲットリストに追加され、ソースリストから削除されます。これで、5つのアイテムのリストと7つのアイテムのリストができました。アイテムをリストごとに6アイテムのままにして、ターゲットリストの一番上を最初のリストに移動するにはどうすればよいですか（1つのリストであるかのように自動的に同じ順序で再配置されます）。

<ul 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>
    <li class="ui-state-default">Item 6</li>
</ul>

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

$( ".connectedSortable" ).sortable({
    connectWith: ".connectedSortable"
}).disableSelection();

明確にするために：リストの数は2つ以上である可能性があります。しかし、私が求めているのは、リストごとに6つのアイテムの固定数であり、単一のリストの場合と同じように自動再配置を修正することです。例として、アイテム3をアイテム4の後にlist1からlist2に移動すると、結果は次のようになります。

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

<ul class="connectedSortable">
    <li class="ui-state-highlight">Item 2</li>
    <li class="ui-state-highlight">Item 3</li>
    <li class="ui-state-highlight">Item 4</li>
    <li class="ui-state-highlight">Item 3</li>
    <li class="ui-state-highlight">Item 5</li>
    <li class="ui-state-default">Item 6</li>
</ul>

jsFiddle

4

1 に答える 1

3

オプションでこれを行うことができreceiveます。<ul>次のコードは、いくつかの要素があることを前提としていますid="ulX"。ここで、Xは1から始まる整数シーケンスです。

$(function() {
    $( ".connectedSortable" ).sortable({
        connectWith: ".connectedSortable",
        receive: function (event, ui) {
             var targetul = $(ui.item).parent().attr("id");
             var targetno = parseInt(targetul.split("ul")[1]);
             var sourceul = $(ui.sender).attr("id");
             var sourceno = parseInt(sourceul.split("ul")[1]);

             if (sourceno > targetno)
                 rippleUp(targetno, sourceno);
             else
                 rippleDown(targetno, sourceno);

        }
    }).disableSelection();
});


function rippleUp(start, end) {
    for (var i=start;i<end;i++) {
         $("#ul"+i+" > li").last().prependTo("#ul"+(i+1));
    }
}

function rippleDown(start, end) {
    for (var i=start;i>end;i--) {
         $("#ul"+i+" > li").first().appendTo("#ul"+(i-1));
    }
}
于 2012-12-06T23:59:07.443 に答える