Javascript 班次列表元素顺序为多个<；ul>；如果其中一个<；李>；换位

我使用拖放功能允许用户在页面上排序元素。我有几个

元素，其中包含
元素（所有
包含3个
元素），每个无序列表对应一个月，因此

<ul class="dragable" id="month-june">
 <li>Item 1</li>
 <li>Item 2</li>
 <li>Item 3</li>
</ul>

<ul class="dragable" id="month-july">
 <li>Item 1</li>
 <li>Item 2</li>
 <li>Item 3</li>
</ul>

<ul class="dragable" id="month-august">
 <li>Item 1</li>
 <li>Item 2</li>
 <li>Item 3</li>
</ul>

<!-- etc.. -->

现在我需要弄清楚如何将项目3从7月份下推到8月份的无序列表，并在之后下推所有其他项目。例如，如果项目1从6月拖到7月，介于项目2和项目3之间，则这应该具有相反的效果，在这种情况下，上面的所有内容都应该向左移动。因此，我需要在任何给定的时间在所有列表中有3项

下面的图片进一步展示了它，希望能更好地解释它：（将中间部分视为首字母，而不是箭头显示项目被拖动的位置，以及根据位置在列表前后发生了什么）


这可以不使用ID或类，而是依赖于下一个和上一个元素（无序列表）来完成，因为我不知道在这种情况下接下来的月份是什么

这里是非常简单的js摆弄拖放行为：
拖放更新

$(".sortable-queue").sortable({
    revert: true,
    scroll: false,
    connectWith: ".connected-sortable",
    placeholder: "item-dragable-placeholder",
    receive: function (event, ui) {
        var target = $(event.target).parent().parent();
        var source = ui.sender.parent().parent();
        var children = target.parent().children();

        var start = children.index(source);
        var end = children.index(target);

        // bubble up?
        if (start < end) {
            for (var i = start; i < end; i++) {
                $(children[i]).find("ul").append($(children[i + 1]).find("li").first().detach())
            }
        }
        // bubble down?
        else if (start > end) {
            for (var i = start; i > end; i--) {
                $(children[i]).find("ul").prepend($(children[i - 1]).find("li").last().detach())
            }
        }
        // same pulldown
        else
            return;
    }
}).disableSelection();

$（“.sortable队列”）.sortable({
回复：对，
卷轴：错，
connectWith:“.connected sortable”，
占位符：“项目可拖动占位符”，
接收：功能（事件、用户界面）{
var target=$（event.target.parent（）.parent（）；
var source=ui.sender.parent（）.parent（）；
var children=target.parent（）.children（）；
var start=children.index（源）；
var end=子项索引（目标）；
//冒泡？
如果（开始<结束）{
对于（变量i=开始；i<结束；i++）{
$（children[i]）.find（“ul”）.append（$（children[i+1]）.find（“li”）.first（）.detach（））
}
}
//泡沫破灭？
else if（开始>结束）{
对于（变量i=start；i>end；i--）{
$（children[i]）.find（“ul”）.prepend（$（children[i-1]）.find（“li”）.last（）.detach（））
}
}
//同样的下拉
其他的
返回；
}
}).disableSelection（）；


它所做的只是识别源和目标ul的div包装器。然后，它使用它来确定目标ul是高于还是低于源ul

如果在下面，它将从源到目标逐步遍历所有包装，从后续包装中获取第一个li并将其添加到末尾

如果它在上面，同样的事情也会发生，唯一的区别是它是从末尾拾取并添加到开头的

如果源包装器和目标包装器相同，则无需执行任何操作


小提琴-


拖动时更新

var source;
$(".sortable-queue").sortable({
    revert: true,
    scroll: false,
    connectWith: ".connected-sortable",
    placeholder: "item-dragable-placeholder",
    start: function(event, ui) {
        source = ui.item.parent().parent().parent();
    },
    over: function (event, ui) {
        var target = $(event.target).parent().parent();
        var children = target.parent().children();
        var start = children.index(source);
        var end = children.index(target);

        // same pulldown
        if (start === end) {
            console.log(start)
            return;
        }
        // bubble up?
        else if (start < end) {
            for (var i = start; i < end; i++) {
                $(children[i]).find("ul").append($(children[i + 1]).find("li:not(.ui-sortable-helper):not(.item-dragable-placeholder)").first().detach())
            }
        }
        // bubble down?
        else if (start > end) {
            for (var i = start; i > end; i--) {
                $(children[i]).find("ul").prepend($(children[i - 1]).find("li:not(.ui-sortable-helper):not(.item-dragable-placeholder)").last().detach())
            }
        }

        source = target;
    }
}).disableSelection();

var源；
$（“.sortable队列”）.sortable({
回复：对，
卷轴：错，
connectWith:“.connected sortable”，
占位符：“项目可拖动占位符”，
开始：功能（事件、用户界面）{
source=ui.item.parent（）.parent（）.parent（）；
},
结束：功能（事件、用户界面）{
var target=$（event.target.parent（）.parent（）；
var children=target.parent（）.children（）；
var start=children.index（源）；
var end=子项索引（目标）；
//同样的下拉
如果（开始==结束）{
console.log（启动）
返回；
}
//冒泡？
else if（开始<结束）{
对于（变量i=开始；i<结束；i++）{
$（子项[i]）.find（“ul”）.append（$（子项[i+1]）.find（“li:not（.ui可排序帮助程序）：not（.item可拖动占位符）”）.first（）.detach（）
}
}
//泡沫破灭？
else if（开始>结束）{
对于（变量i=start；i>end；i--）{
$（children[i]）.find（“ul”）.prepend（$（children[i-1]）.find（“li:not（.ui可排序帮助程序）：not（.item可拖动占位符）”）.last（）.detach（）
}
}
源=目标；
}
}).disableSelection（）；


逻辑基本相同。唯一的区别是

您在
上进行更新（当您将项目拖动到放置目标上时）
您必须维护源包装器值，而不是从ui对象获取它，因为一旦您将鼠标悬停在放置目标上，您将更改它

请注意，在拾取要分离的图元时，必须排除要拖动的图元和占位符


Fiddle-
你能创建一个JSFIDLE吗，@dreamweiver只是把它添加到问题的底部，只是为了总结你的需求，1。您希望在每次拖放后对列表进行排序。2.此外，如果目标列表包含新项目，则应将其删除。3.总之，不应该有任何重复。2-不确定你在这里的意思，不应该删除任何元素，只是相应地改变位置，除了你总结的所有内容听起来都是正确的以外。@dreamweiver如果有帮助的话：我相信更改事件应该是排序工作发生的地方！但当我将项目拖到列表中时，我仍然看到4个元素，一旦我发布了它，它们似乎会很好地进行排序，我尝试将接收事件更改为change，但它似乎无法工作！进行测试：-）
var source;
$(".sortable-queue").sortable({
    revert: true,
    scroll: false,
    connectWith: ".connected-sortable",
    placeholder: "item-dragable-placeholder",
    start: function(event, ui) {
        source = ui.item.parent().parent().parent();
    },
    over: function (event, ui) {
        var target = $(event.target).parent().parent();
        var children = target.parent().children();
        var start = children.index(source);
        var end = children.index(target);

        // same pulldown
        if (start === end) {
            console.log(start)
            return;
        }
        // bubble up?
        else if (start < end) {
            for (var i = start; i < end; i++) {
                $(children[i]).find("ul").append($(children[i + 1]).find("li:not(.ui-sortable-helper):not(.item-dragable-placeholder)").first().detach())
            }
        }
        // bubble down?
        else if (start > end) {
            for (var i = start; i > end; i--) {
                $(children[i]).find("ul").prepend($(children[i - 1]).find("li:not(.ui-sortable-helper):not(.item-dragable-placeholder)").last().detach())
            }
        }

        source = target;
    }
}).disableSelection();