Question

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

<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，那么结果应为：

<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

Answer 1

您可以使用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));
    }
}

jQuery sortable - 在2个连接列表之间移动项目保持计数

1 个答案: