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

我刚刚为一组图像实现了jQueryUISortable插件。我的标记如下：

<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是DB表中的“name”列-我不希望显示id列

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

编辑：

---

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

我刚刚完成了这项工作。我是这样做的：

在

#images

元素周围放置一个指向ajax脚本的表单、操作。在每个图像旁边都有一个隐藏的输入字段，例如：

重新排序映像时，捕获jQuery可排序更新和停止事件，如下所示：

$("#images").sortable({

  // configuration
  delay: 100,
  items: 'li',
  update: function(event, ui) {

    // Update order indexes
    updateOrderIndexes();
  },
  stop: function(event, ui) {

    // fire off the update method
    postUpdateOrder();
  }
});

function updateOrderIndexes()
{
  // Update the order index on each item
  var orderIndex = 1;
  $("#images li").each( function() {

    $(this).find("input[type=hidden]:first").val(orderIndex);
    orderIndex++;
  })    
}

在需要编写的

postUpdateOrder（）

函数中，可以使用jQuery的

$.post

函数执行返回服务器的AJAX post请求。然后，每个字段将在PHP脚本的$u POST数组中可用，该数组按ID命名，并带有新索引的值。根据需要进行验证，保存新值，并将确定/错误发送回浏览器

更新根据您不将其包含在表单中的编辑要求，您仍然可以通过向所有与订单相关的输入字段添加一个类来完成此操作，将AJAX url放在Javascript中的某个地方，例如var

myRoute='/some/path/to/script.php'

，然后根据

$（“input.myclass”）。each（）

-使用jQuery编写的代码。基本上，我使用的所有输入字段都是客户端数据存储—您可以按照自己的意愿完成这项工作

同样要澄清的是，表单不需要“提交”按钮等，它只是使序列化数据以发送到AJAX脚本变得更容易——如果使用上述代码，当您停止拖动项目时，会自动触发该命令。

基本上，这样做：

首先，将项目的id格式更改为sortable所需的下划线格式：

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

当您使用

$（“#images”）.sortable（“serialize”）

时，sortable的方法将遍历#images的子元素，即所有li元素，并将它找到的所有ID（

image7884029

，

image7379458

等）转换为一个项目列表，如

image[]=7884029&image[]=7379458…

，排序后，它们现在在列表中的显示顺序（因为您是从

stop（）

调用它）。基本上，它的工作原理类似于在发布表单时发送复选框数组的方式

然后，您可以在服务器端的“reorder.php”中选择此选项，为排序列指定新值：

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

---

完成了。

Nice-不知道sortable中的serialize方法。我的回答是基于我在一个Symfony项目中的实现，所以我们使用Symfony表单来处理post数据，但是你的回答非常简洁：-）感谢这位伙伴。顺便问一下，在“停止”方法中这样做有什么具体原因吗？它也适用于“update”方法。@GSTAR老实说，我可能使用了

stop（）

，因为它在文档中出现在

update（）

之前，并且有效：）阅读这两个事件的描述，我看不出使用

stop（）

或

update（）有什么好处

用于在用户停止拖动时更新数据库。

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