2

我正在使用可排序的 jquery。

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

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

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

原名单：

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

提交按钮在这里。

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

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

提交按钮在这里。

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

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

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

谢谢你。

4

2 回答 2

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

于 2009-08-27T08:47:08.577 回答
1

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

$(function() {
  $("#sortableList").sortable({
    update: function(event, ui) {
      // Update ui.item to your requirement
    }
  });
});
于 2009-08-27T08:59:06.570 回答