jQuery UI可排序-排序图像 [英] jQuery UI sortable - sorting images

问题描述

我刚刚为一组图像实现了jQuery UI sortable插件.我的标记如下:

I've just implemented the jQuery UI sortable plugin for a set of images. The markup I have is as follows:

<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列.

The LI id is the 'name' column in the DB table - I prefer not to display the ID column.

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

Now my question is how do I capture the sorting? I understand this would be an AJAX request but I have no idea how to do it. I have set up a sort_order column in my DB table and I am using PHP as my scripting language. I could do with a code example.

理想情况下，我更喜欢在移动项目时应用排序顺序，即我不想将所有内容都用表格括起来.

Ideally I prefer if the sort order is applied upon moving an item, i.e. I do not want to enclose it all in a form.

推荐答案

基本上，请执行以下操作:

Basically, do this:

首先，将商品的ID格式更改为sortable期望的下划线格式:

First, change your items' id format to the underscored format expected by sortable:

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

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

Then, use sortable's serialize method in its stop event:

... // 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...，之类的项列表排序后的列表(因为您是从stop()调用它的).基本上，其工作原理与发布表单时如何发送复选框数组相似.

When you use $("#images").sortable("serialize"), sortable's serialize method will go through the children of #images, i.e. all your li elements, and turn all the ids it finds (image_7884029, image_7379458, etc.) into a list of items like image[]=7884029&image[]=7379458..., in the order they now appear in the list, after sorting (because you're calling it from stop()). Basically it works similar to how an array of checkboxes gets sent when posting a form.

然后您可以在服务器端"reorder.php"中进行选择，以将新值分配给您的sort_order列:

You can then pick this up in your server-side "reorder.php", to assign new values to your sort_order column:

$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.');
}

您完成了.

这篇关于jQuery UI可排序-排序图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！