Question

我正在使用jquery sortable。

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

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

我需要的是以某种方式表明元素的位置已经改变。我用Google搜索了一下。没有答案。

原始列表：

ITEM1 ITEM2 项目3 ITEM4 ITEM5

在这里提交按钮。

更改了列表：我将项目2移到了项目3下面，例如。

ITEM1 项目3 item2 * ITEM4 ITEM5

在这里提交按钮。

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

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

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

谢谢。

Answer 1

我认为你想要做的是有一个有序的项目清单（1.项目1,2，项目2,3，项目3），然后当移动一个项目时，你想重新编号列表，对吧？因此，如果2被移动到三以下，你会希望文本说出类似1.项目1,2。项目3，项目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上的“事件”选项卡下的更多信息）执行此操作，只要用户移动项目并释放鼠标，就会调用您提供的任何功能。

Answer 2

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

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

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

2 个答案: