jquery - 如何使用 jquery 指示列表元素顺序的变化？

Question

我正在使用 jquery 可排序。

现在我有一个可以使用拖放操作的项目列表。这很酷。

我将使用列表底部的提交按钮来提交新订单。列表中的更改不会自动提交。

我需要的只是以某种方式表明元素的位置已更改。我用谷歌搜索了很多。没有答案。

原始列表:

项目1项目2项目3项目4项目5

此处提交按钮。

更改了列表:例如，我将第 2 项移至第 3 项下方。

项目1项目3项目2 *项目4项目5

此处提交按钮。

如何使用 jquery 中的可排序功能在项目 2 上显示标志？

我认为应该是sortable的change事件，但我仍然不知道如何使用它，因为我是jquery的新手。

http://docs.jquery.com/UI/Sortable#event-change

谢谢。

Answer 1

我认为您想要做的是有一个有序的项目列表(1.项目1、2.项目2、3.项目3)，然后当移动一个项目时您想要重新编号该列表，对吧？因此，如果 2 移动到 3 以下，您会希望文本显示类似 1. Item 1, 2. Item 3, 3. Item 2. 如果我的说法正确，您的代码将如下所示。首先，您的 HTML 需要如下所示。

<ul id="yourSortableListID">
   <li class="renumberMe"><span class="list_num"></span> Item 1</li>
   <li class="renumberMe"><span class="list_num"></span> Item 2</li>
   <li class="renumberMe"><span class="list_num"></span> Item 3</li>
</ul>

你的 JavaScript 看起来像这样:

function renumberListItems() {
    i = 1;
    $(".renumberMe").each( function() {
        $(".list_num", this).text(i + ".");
        i++;
    });
}

// we don't want to add the sortable until the dom is ready
$(document).ready(function() {
    renumberListItems();
    $("#yourSortableListID").sortable({
        stop: function(event, ui) {renumberListItems();}
    });
});

renumberListItems() 遍历每个 li 项，然后找到其中的 list_num 项，然后使用 i 的值更新文本，以便对列表重新编号。我们使用可排序项提供的 stop 事件(更多信息在 this page 上的“事件”选项卡下)来执行此操作，每当用户移动项目并释放鼠标时，该事件都会调用您提供的任何函数。