jQuery可排序 - 在2个连接列表之间移动项目并保持计数

Question

jQuery可排序 - 在2个连接列表之间移动项目并保持计数

3

我有两个列表，每个列表都有六个项目，它们使用.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个项目，并且正确地自动重新排列，就像单个列表一样。例如，如果您将列表1中的项目3移动到列表2中的项目4后面，那么结果应该是这样的:

<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

- Wonka

你能详细解释一下你想要的是什么吗？如果你将“项目3”从源列表拖到目标列表，你希望在这两个列表中都看到什么出现？ - mccannf

@mccannf 刚刚澄清了问题。 - Wonka

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- mccannf · Accepted Answer

您可以使用receive选项来实现这一点。以下代码假定有许多带有id="ulX"的<ul>元素，其中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));
    }
}