基本上,这样做:
首先,将项目的 id 格式更改为可排序所需的下划线格式:
<li id="image_7884029"><img ...
<li id="image_7379458"><img ...
然后,使用可排序的serialize
方法中的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")
, 可排序的连载 http://docs.jquery.com/UI/Sortable#method-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.');
}
你就完成了。