jQuery UI 可排序 - 对图像进行排序

Question

我刚刚为一组图像实现了 jQuery UI 可排序插件。我的标记如下:

<ul id="images" class="ui-sortable">
  <li id="7884029"><img src="/images/member/4698568/7884029_t.jpg" alt="" /></li>
  <li id="7379458"><img src="/images/member/4698568/7379458_t.jpg" alt="" /></li>
  <li id="1704208"><img src="/images/member/4698568/1704208_t.jpg" alt="" /></li>
  <li id="1750715"><img src="/images/member/4698568/1750715_t.jpg" alt="" /></li>
  <li id="4364912"><img src="/images/member/4698568/4364912_t.png" alt="" /></li>
</ul>

<script type="text/javascript">
/*<![CDATA[*/
jQuery(function($) {
  jQuery('#images').sortable({'delay':'100'});
});
/*]]>*/
</script>

LI id 是数据库表中的“名称”列 - 我不想显示 ID 列。

现在我的问题是如何捕获排序？我知道这是一个 AJAX 请求，但我不知道该怎么做。我已经在数据库表中设置了 sort_order 列，并且使用 PHP 作为脚本语言。我可以使用代码示例。

编辑:

理想情况下，我更喜欢在移动项目时应用排序顺序，即我不想将其全部包含在表单中。

Answer 1

基本上，这样做:

首先，将项目的 ID 格式更改为可排序所需的下划线格式:

<li id="image_7884029"><img ...
<li id="image_7379458"><img ...

然后，在其 stop 事件中使用 sortable 的 serialize 方法:

... // Within your sortable() setup, add the stop event handler:
stop:function(event, ui) {
  $.ajax({
    type: "POST",
    url: path/to/your/ajax/reorder.php,
    data: $("#images").sortable("serialize")
  });
}
...

当您使用$("#images").sortable("serialize")时，sortable的serialize方法将遍历 #images 的子元素，即所有 li 元素，并将其找到的所有 id(image_7884029、image_7379458 等)转换为项目列表像 image[]=7884029&image[]=7379458...，排序后按照它们现在在列表中出现的顺序(因为您是从 调用它>停止())。基本上它的工作原理类似于发布表单时发送复选框数组的方式。

然后您可以在服务器端“reorder.php”中选择它，为您的 sort_order 列分配新值:

$items = $_POST['image'];
if ($items) {
  foreach($items as $key => $value) {           
    // Use whatever SQL interface you're using to do
    // something like this:
    // UPDATE image_table SET sort_order = $key WHERE image_id = $value
  } 
} else {
  // show_error('No items provided for reordering.');
}

你就完成了。