jquery - 如何在 jquery/php/mysql 中对图像进行排序，与 google picassa 重新排序界面相同？

Question

我使用的是 PHP/MYSQL。

我想创建一个图像库来对图像进行排序。用户将拖放图像来排序和组织他们的图像。就像毕卡萨这样做一样。

我使用 jQuery UI 可排序插件创建了一个页面:http://jqueryui.com/demos/sortable/#display-grid

演示页面:http://jsbin.com/oqani/9/

它可以正确拖放图像。但在用户完成图像排序后，我无法获取图像的当前顺序。一旦我获得当前订单，我必须将该订单保存在该特定图像的数据库中。

假设我有图像 1, 2, 3, 4, 5, 6, 7, 8, 9 顺序，然后我重新排列图像，顺序变为 1, 3, 4, 7 、8、2、5、6、9。因此，单击“显示顺序”按钮时，它应该显示顺序为 1, 3, 4, 7, 8, 2, 5, 6, 9。

任何人都可以帮助我在单击“显示顺序”按钮时显示图像的当前顺序，并为我提供一些关于如何在数据库中放置特定图像的当前顺序的概念。

谢谢

Answer 1

jQuery("#contentSortableUL").sortable({
    opacity: 0.6,
    cursor: "move",
    update: function(){
        var order = $(this).sortable("serialize"); 
        jQuery.post("update-sorting.php", order, function(theResponse){
            // Callback code here
        });
    }
});

要更新数据库，您需要在 update-sorting.php 页面中编写代码:

<?php
/* code in update-sort.php would look like */
include("includes/db.connection.php");

$updateRecordsArray = $_POST['recordsArray'];
$listingCounter = 1;
$orderedImageIds = array();

foreach ($updateRecordsArray as $recordIDValue){
    $listingCounter = $listingCounter + 1;

    /* update query goes here */
    update tableName set order = $listingCounter 
}
?>

希望有帮助。