javascript - 获取 jQuery 可排序列表中列表项的顺序

Question

我的网站上有一个列表。我使用 jQuery 的可排序教程让用户能够更改列表项的顺序。

http://jqueryui.com/demos/sortable/

诀窍是我想在度假村之后立即捕获项目的顺序，并将顺序值分配给隐藏的表单元素，这些元素将通过表单提交传递到我的服务器，我可以使用 php 脚本来保存数据库中元素的新顺序。

这是演示的源代码:

 <style>
    #sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
    #sortable li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
    #sortable li span { position: absolute; margin-left: -1.3em; }
    </style>
    <script>
    $(function() {
        $( "#sortable" ).sortable();
        $( "#sortable" ).disableSelection();
    });
    </script>


<div class="demo">

<ul id="sortable">
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 3</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 4</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 5</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 6</li>
    <li class="ui-state-default"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 7</li>
</ul>

</div><!-- End demo -->

而且我知道还可以分配一个在排序停止时触发的回调函数:

$( ".selector" ).sortable({
   stop: function(event, ui) { ... }
});

谢谢!

Answer 1

我 5 年前写过这个问题的答案，但那个答案很糟糕(这个问题有近 38,000 次浏览)，所以这里有一个改进的答案。

您必须解决这个问题的三个部分。我们将看看这三个。

响应排序顺序的更改(第 1 步)

我们需要解决的第一个问题是对排序元素顺序的变化使用react。如果我们查看 jQuery UI Sortable Widget 的 documentation ，我们看到它有 change每当排序顺序发生变化时就会触发该事件，非常适合我们的需求。

Side note: My original answer used stop instead of the change event. change is better (at least in this case) because it will report all changes in sorting, whether the change was interactive (user) or programmatic, and only if the order has actually changed. On the other hand, the sort event is only fired when the user stops sorting (releases the mouse, or lifts their finger).

使用sort事件，我们现在可以响应排序的变化。以下代码将为我们初始化一个 Sortable 小部件，并允许我们设置一个在 sort 触发时调用的函数:

var $sortableList = $("#your-list");

var sortEventHandler = function(event, ui){
    console.log("New sort order!");
};

$sortableList.sortable({
    stop: sortEventHandler
});

// You can also set the event handler on an already existing Sortable widget this way:

$sortableList.on("sortchange", sortEventHandler);

完成后，我们现在准备好进行第 2 步:

检索排序后的元素(第 2 步)

这部分相当简单。我们只需要获取排序列表中的元素数组。为此，我们只需使用 jQuery 函数 children() 即可获取 ul(列表)元素的子元素:

var listElements = $sortableList.children();

console.log(listElements); // [ <li>, <li>, ... ]

很好，但我们特别需要元素的值:

var listValues = [];

listElement.forEach(function(element){
    listValues.push(element.innerHTML);
});

console.log(listValues); // [ "Item 1", "Item 2", ... ]

使用.sortable("toArray")或.serialize()也是选项。

不错!进入最后一点。

序列化并发送新的排序顺序(步骤 3)

序列化是“将数据结构或对象状态转换为可存储格式(例如，在文件或内存缓冲区中，或通过网络连接链路传输)的过程”(感谢Wikipedia!)

如何执行此操作在很大程度上取决于您的具体需求，因此我们将仅讨论使用 jQuery 完成此操作的一些方法。

AJAX:

如果我们使用 AJAX，我们可以使用新订单向服务器发出请求。 jQuery 将自动为我们处理序列化 listValues:

$.post("your-server.com/save_order", { "items": listValues } );

或者如果您更喜欢 JSON:

$.post("your-server.com/save_order", JSON.encode({ "items": listValues }) );

表单

创建表单:

<form action="your-server.com/save_order" method="POST">
    <input name="items" value="" />
</form>

更新item输入:

var serializedValue = $.param(listValues);

$("#ourForm > input").val(JSON.encode(listValues));

发送:

$("#ourForm").submit()

旧答案:

HTML:

<form action="save_order.php" method="POST" style="display: none;">
<input name="new_order" value="" type="hidden" />
</form>

JavaScript:

$(".selector").sortable({
    stop: function(event, ui) {
        var data = "";

        $("#sortable li").each(function(i, el){
            var p = $(el).text().toLowerCase().replace(" ", "_");
            data += p+"="+$(el).index()+",";
        });

        $("form > [name='new_order']").val(data.slice(0, -1));
        $("form").submit();
    }
});

在 save_order.php 中，您可以解析 POST 变量“new_order”并获取 Item 1、Item 2、Item 3 等的订单。