3

I have two list with 6 items, connectedWith a class of .connectedSortable When I move an item between the two lists, it gets appended to the target list, and removed from the source list. So now we have a list with 5 items, and a list with 7 items. How can the items remain 6 items per list, and we just move the top most in the target list to the first list (automatically rearranges itself in the same order as if it were one list)?

<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();

To clarify: The number of lists may be 2 or more. But what I am after is the fixed number of 6 items per list and correct automatic rearrangement as sortable does if it were single list. An example is if you move item 3 from list1 to list2 after item 4, then the outcome should be this:

<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 回答