jQuery sortable - 在2个连接列表之间移动项目保持计数 [英] jQuery sortable - move item between 2 connected lists keeping count

问题描述

我有两个列表，包含6个项目，connectedWith类 .connectedSortable 当我在两个列表之间移动项目时，它会被附加到目标列表，并被删除来自源列表。所以现在我们有一个包含5个项目的列表，以及一个包含7个项目的列表。每个列表中的项目如何保留6个项目，我们只是将目标列表中最顶层的项目移动到第一个列表（自动按照与列表相同的顺序重新排列）？

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

澄清：列表数量可能是2或更多。但我所追求的是每个列表固定数量为6个项目，如果它是单个列表，则可以自动重新排序。例如，如果您在第4项之后将项目3从list1移动到list2，那么结果应为：

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

推荐答案

您可以使用 receive 选项。以下代码假定有一些< ul> 元素，其中 id =ulX，其中 X 是从1开始的整数序列：

You can do this with the receive option. The following code assumes that there are a number of <ul> elements, with id="ulX", where X is an integer sequence starting from 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));
    }
}

这篇关于jQuery sortable - 在2个连接列表之间移动项目保持计数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！