如何在jQuery UI排序中列表项从一个列表移动到另一个列表后更新排序顺序号答案

【问题标题】：How to Update sort order number after list item moved from one list to another in jQuery UI sort如何在jQuery UI排序中列表项从一个列表移动到另一个列表后更新排序顺序号
【发布时间】：2020-04-29 21:02:19
【问题描述】：

我正在使用 jquery ui sort 将项目从列表 1 移动到列表 2，在每个元素上我都有一些编号，所以每当移动项目时，我希望列表 1 和列表 2 都应该更新其排序编号。例如：列表 1 有 4 个项目如果 item3 从 list1 移动到 list2，则 list1 应该像 item1 item2 item3 一样重新排序，在项目移动到列表 2 后，列表 2 也重新排序它的编号，它应该成为项目 5。

css:

 <style>
        .sortable_list {
            border: 1px solid #eee;
            width: 142px;
            min-height: 20px;
            list-style-type: none;
            margin: 0;
            padding: 5px 0 0 0;
            float: left;
            margin-right: 10px;
        }

        .sortable_list li {
            margin: 0 5px 5px 5px;
            padding: 5px;
            font-size: 1.2em;
            width: 120px;
        }
    </style>

<link rel="stylesheet" href="jquery-ui.css">
<script src="jquery-1.10.2.js"></script>
<script src="jquery-ui.js"></script>

html代码：

<ul id="sortable1" class="sortable_list connectedSortable">
    <li class="ui-state-default">1-List 1 - Item 1</li>
    <li class="ui-state-default">2-List 1 - Item 2</li>
    <li class="ui-state-default">3-List 1 - Item 3</li>
    <li class="ui-state-default">4-List 1 - Item 4</li>

</ul>
<ul id="sortable2" class="sortable_list connectedSortable">
    <li class="ui-state-highlight">1-List 2 - Item 1</li>
    <li class="ui-state-highlight">2-List 2 - Item 2</li>
    <li class="ui-state-highlight">3-List 2 - Item 3</li>
    <li class="ui-state-highlight">4-List 2 - Item 4</li>

</ul>  

<script>
    $(function () {
        $(".sortable_list").sortable({
            connectWith: ".connectedSortable",
            receive: function (event, ui) {

           var sender=ui.sender[0].id;
                 $('#'+sender).each(function (i) {
            var numbering = i + 1;
            $(this).text(numbering);
        });

            }
        }).disableSelection();
    });
</script>

【问题讨论】：

标签： jquery sorting drag-and-drop jquery-ui-sortable drag

【解决方案1】：

使用一些徽章或跨度按数字排序，我将在此处更新

<ul id="sortable1" class="sortable_list connectedSortable">
    <li class="ui-state-default"><span class="number"></span>List 1 - Item 1</li>
    <li class="ui-state-default"><span class="number"></span>List 1 - Item 2</li>
    <li class="ui-state-default"><span class="number"></span>List 1 - Item 3</li>
    <li class="ui-state-default"><span class="number"></span>List 1 - Item 4</li>

</ul>

在 Jquery 中编写每个函数以对其进行迭代

$("#" + sender + " li").each(function (n) {
   $(this).find('.number').html(n + 1);
});

【讨论】：