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


how to indicate a change in list elements' order using jquery?

我正在使用可排序的jQuery。

现在我有一个列表，可以使用拖放功能了。太酷了。

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

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

原始列表：

item1
item2
项目3
项目4
item5

此处提交按钮。

更改列表：我将第2项移至第3项以下，例如

item1
项目3
item2 *
项目4
item5

此处提交按钮。

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

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

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

谢谢。

相关讨论

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

1
2
3
4
5
6
7
$(function() {
  $("#sortableList").sortable({
    update: function(event, ui) {
      // Update ui.item to your requirement
    }
  });
});

我认为您想要做的是按顺序排列的项目列表(1.项目1、2。项目2、3。项目3)，然后在移动一个项目时要对列表重新编号，对吗？因此，如果将2移到3以下，则您希望文本表示类似1. Item 1，2. Item 3，3. Item2。如果我对此表示正确，则您的代码应如下所示。首先，这是您的HTML需要的外观。

1
2
3
4
5
6
7
8
9
10
11
12
<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看起来像这样：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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事件(此页面上"事件"选项卡下的更多信息)来执行此操作，该事件将在用户移动项目并释放鼠标时调用您提供的任何函数。