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

Question

我正在使用 jquery ui 排序将项目从列表 1 移动到列表 2，在每个元素上我都有一些数字，所以无论何时移动项目我都想要列表 1，列表 2 应该更新其排序编号。 例如：如果 item3 从 list1 移动到 list2，list 1 有 4 个项目，则 list1 应该像 item1 item2 item3 一样重新排序，项目移动到 list 2 后的方式相同，list 2 也重新排序它的编号，它应该成为 item 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>

Answer 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);
});