jQuery UI sortable - 排序图像答案

【问题标题】：jQuery UI sortable - sorting imagesjQuery UI sortable - 排序图像
【发布时间】：2010-12-23 22:04:01
【问题描述】：

我刚刚为一组图像实现了 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 是 DB 表中的“名称”列 - 我不想显示 ID 列。

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

编辑：

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

【问题讨论】：

标签： jquery jquery-ui

【解决方案1】：

基本上，这样做：

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

<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... 这样的项目列表，按照它们现在在列表中出现的顺序，排序后（因为你是从stop() 调用它的）。基本上它的工作方式类似于发布表单时发送复选框数组的方式。

然后您可以在您的服务器端“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.');
}

你已经完成了。

【讨论】：

很好 - 不知道可排序中的序列化方法。我的回答是基于我在 Symfony 项目中所做的实现，所以我们使用 Symfony 表单来处理发布数据，但你的回答非常简洁:-)
感谢这位朋友。顺便说一句，在“停止”方法中这样做有什么具体原因吗？它也适用于“更新”方法。
@GSTAR 老实说，我可能使用了stop()，因为它在文档中出现在update() 之前并且有效:) 阅读这两个事件的描述，我看不到那里当用户停止拖动时，使用stop() 或update() 更新数据库会有很大的优势。

【解决方案2】：

我刚刚完成了这个。我是这样做的：

用一个表单包围#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 发布请求返回给服务器。然后，每个字段都将在您的 PHP 脚本的 $_POST 数组中可用，按照 ID 命名，并具有新索引的值。根据需要进行验证，保存新值，然后将 OK/error 发送回浏览器。

更新基于您不将其包含在表单中的编辑要求，您仍然可以通过例如向所有与订单相关的输入字段添加一个类，将 AJAX url 放入您的 Javascript 来执行此操作某处，例如 var myRoute = '/some/path/to/script.php'，并根据带有 jQuery 的 $("input.myclass").each() 样式代码自己构造要发送到服务器的数据。基本上，我使用输入字段的只是数据存储客户端 - 您可以根据需要完成此操作。

另外澄清一下，您不需要为表单设置提交按钮等，它只是更容易序列化数据以发送到 AJAX 脚本 - 当您停止拖动项目时会自动触发如果你使用上面的代码。

【讨论】：