如何序列化与 jQueryUI 可排序列表的当前项相关的数据？

Question

我正在使用 jQueryUI 1.8.14。我想实现一个 可排序列表 并在每次用户访问时在我的应用程序数据库中保存相关项目位置更改更改项目位置。

为此，我计划检索并序列化 id 值以及刚刚更改其位置的项目的新位置值（我需要这样做才能生成并准备数据以执行 AJAX HTTP 请求）。无论如何，使用 官方文档 中描述的 serialize 方法，它将序列化所有可提交字符串中的项目 id 值（例如：key=1&key=2&...），但我想仅序列化 当前项目id 值并检索其新的位置值。

我该如何制作\代码？

---

此时我正在尝试以这种方式实现该功能：

JavaScript代码：

$jQ(function() {
  $jQ("#sortable_list").sortable({
    placeholder: "ui-state-highlight",
    update: function(event, ui) {

      // Here I would like to "serialize" ONLY the current updated item and
      // then perform the AJAX HTTP request

      // alert($jQ("#sortable_list").sortable("serialize"))
      ...
    }
  });
  $jQ( "#sortable_list" ).disableSelection();
});

HTML代码

<ul id="sortable_list">
  <li class="ui-state-default" id="key_1"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 1</li>
  <li class="ui-state-default" id="key_2"><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>Item 2</li>
  ...
</ul>

例如，如果我更改相关的项目位置到 id="key_2" 我想将该数据序列化为 key=2 （注意：通常 serialize 方法会生成如下数据key=1&key=2&...）。此外，我想包含该项目的当前\新位置（例如：new_position=1）。最后，我想执行包含以下参数的 AJAX HTTP 请求：?key=2&new_position=1。

Answer 1

测试过http://jsfiddle.net/kRsCE/

$jQ(function() {
  $jQ("#sortable_list").sortable({
    placeholder: "ui-state-highlight",
    update: function(event, ui) {
        var itemid = $(ui.item).attr('id');
        var position;
        $jQ("sortable_list > li").each(function(index) {
            if($(this).attr('id') == itemid) {
               position = index;
               return;
            }
        });
        $.post('yourajaxscript', '&key='+itemid+'&new_position='+position, function(data) {
            //handle response
        });
    }
  });
  $jQ( "#sortable_list" ).disableSelection();
});