Javascript jquery可排序在拖动时保持顺序

假设我有两个列表，可以将项目从一个列表放到另一个列表。 第一个列表是所有可能项目的来源。第二个列表是用户选择的项目列表。 在第二个列表中，项目的顺序由用户定义，因此我的实际代码运行良好。我可以从左边拖动一个项目，只要我想在右边。 第一个列表应保持特定的顺序。因此，如果用户从左侧列表中选择第三项，将其放在右侧列表中，然后将其放回左侧列表中它应返回到第三个位置

实际上，用户可以决定将其放回任何位置。我在文档中没有发现有可能保留一个带有特定订单的ul，这是以某种方式管理的吗

$（函数（）{
$（“#可排序1，#可排序2”）。可排序({
connectWith:“.connectedSortable”，
占位符：“ui状态突出显示”
}).disableSelection（）；
} );
正文{
字体系列：Arial、Helvetica、无衬线字体；
}
桌子{
字号：1em；
}
.ui可拖动，.ui可拖放{
背景位置：顶部；
}
#排序1，#排序2{
边框：1px实心#eee；
宽度：142px；
最小高度：20px；
列表样式类型：无；
保证金：0；
填充：5px0；
浮动：左；
右边距：10px；
}
#可排序1 li，#可排序2 li{
保证金：0 5px 5px 5px；
填充物：5px；
字体大小：1.2米；
宽度：120px；
}
.ui状态突出显示{高度：1.5em；线高度：1.2em；}


第1a项
第2a项
第3a项
第4a项
第5a项


第1b项
第2b项
第3b项
第4b项
第5b项
您只需要捕获可排序表的
更新事件。
我建议您保存原始订单

let originalOrder = {'first':1,'second':2,'third':3,'forth':4,'fifth':5};

并在每个项目中保留某种id-

<li class="ui-state-default" data-value="first">Item 1b</li>

还有主函数，它将实现所有的魔法-

function keepOriginalOrder(e, ui) {
        var selector = $('#sortable1'),
    element = selector.children('li');
    element.sort(function(a,b) { return originalOrder[$(a).attr('data-value')] - originalOrder[$(b).attr('data-value')]; });
    element.detach().appendTo(selector);
}

我不仅仅使用数字作为ID，只是为了表明可以使用原始值作为数据值。只需确保使用正确的数字设置originalOrder

试试这个-

function keepOriginalOrder(e, ui) {
        var selector = $('#sortable1'),
    element = selector.children('li');
    element.sort(function(a,b) { return originalOrder[$(a).attr('data-value')] - originalOrder[$(b).attr('data-value')]; });
    element.detach().appendTo(selector);
}