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

【问题标题】：how to indicate a change in list elements' order using jquery?如何使用 jquery 指示列表元素顺序的变化？
【发布时间】：2009-08-27 07:49:24
【问题描述】：

我正在使用可排序的 jquery。

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

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

我所需要的只是以某种方式表明一个元素的位置已经改变。我google了很多。没有答案。

原始列表：

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

在这里提交按钮。

更改列表：例如，我将第 2 项移到第 3 项下方。

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

在这里提交按钮。

我如何使用 jquery 中的 sortable 在项目 2 上显示标志？

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

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

谢谢。

【问题讨论】：

您是要在项目 2 上显示特定的视觉效果，还是要询问如何更新列表？

标签： jquery jquery-ui jquery-ui-sortable onchange

【解决方案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 的值更新文本，以便重新编号列表。我们使用 sortables 提供的 stop 事件（更多信息在 this page 上的事件选项卡下）执行此操作，只要用户移动项目并释放鼠标，它就会调用您提供的任何函数。

【讨论】：

【解决方案2】：

您可以为sortable 的update 事件提供回调，并在该回调中访问ui.item 以访问被拖动的元素。例如：

$(function() {
  $("#sortableList").sortable({
    update: function(event, ui) {
      // Update ui.item to your requirement
    }
  });
});

【讨论】：