jQuery sortable-在两个连接的列表之间移动项以保持计数

我有两个包含6个项目的列表，与

类连接。connectedSortable

当我在两个列表之间移动一个项目时，它会附加到目标列表，并从源列表中删除。现在我们有了一个包含5项的列表和一个包含7项的列表。每个列表中的项目如何保持6个项目，而我们只是将目标列表中最上面的项目移动到第一个列表中（自动按照与一个列表相同的顺序重新排列）

第1项
第2项
第3项
第4项
第5项
第6项


第1项
第2项
第3项
第4项
第5项
第6项

$（“.connectedSortable”）.sortable({
connectWith:“.connectedSortable”
}).disableSelection（）；

澄清：列表的数量可以是2个或更多。但我所追求的是每个列表中6个项目的固定数量，以及正确的自动重新排列，就像sortable在单个列表中所做的那样。例如，如果在项目4之后将项目3从列表1移动到列表2，则结果应为：

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

第1项
第2项
第4项
第5项
第6项
第1项


第2项
第3项
第4项
第3项
第5项
第6项

---

您可以使用

接收

选项执行此操作。以下代码假定存在多个

元素，其中
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));
    }
}

$（函数（）{
$（“.connectedSortable”）.sortable({
connectWith:“.connectedSortable”，
接收：功能（事件、用户界面）{
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]）；
如果（sourceno>targetno）
rippleUp（目标号、源号）；
其他的
rippleDown（目标号、源号）；
}
}).disableSelection（）；
});
功能rippleUp（开始、结束）{
对于（变量i=开始；iend；i--）{
$（“#ul”+i+“>li”）.first（）.appendTo（“#ul”+（i-1））；
}
}
你能更详细地解释一下你想要什么吗？如果您将
项目3
从源列表拖动到目标列表，您希望在两个列表中看到什么？@mccannf刚刚澄清了这个问题。。在拖动了一些项目之后，它似乎无法正常工作（使用顶部的一个古怪的项目是可以的，因为它应该有6个项目）。例如，在上面的场景中，在将第三个项目移回其在列表1中的位置后，订单会变得混乱。从那以后的一切都扰乱了秩序。如果还有第三个+列表，则代码不适用于该列表（它添加/删除项目，忽略6个项目的限制）。这里有一把小提琴：@Wonka-抱歉没有看到3+列表的要求。已编辑-现在将通过ui.sender支持该功能。然而，它现在似乎按照你的问题工作。你说“秩序混乱”是什么意思？如果将任何项从一个列表拖动到另一个列表，则目标列表中的第一项将附加到源列表中，对吗？您是否有将项目拖回原始列表的其他要求？嗯。。。尝试将项目3从列表3拖动到项目3下的列表2，这将导致列表2的项目5成为列表3中的第一个li，但它无法按预期工作。它将项目1从列表2中移动到列表3中的最后一个位置。我昨晚提出了这个，它工作得很好，只是它只支持3个列表。我一直在寻找一个像你这样的解决方案，可以处理x个列表：啊，现在我明白你想做什么了。更新代码。将与任意数量的
元素一起工作
$(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));
    }
}