How to sort images in jquery/php/mysql same as google picassa reorder interface?

Question

I am using PHP/MYSQL.

I want to create a image gallery for sorting images. User will drag and drop images to sort and organize their images. Just like picassa do this.

I have created a page using using jQuery UI sortable plug-in: http://jqueryui.com/demos/sortable/#display-grid

Demo Page: http://jsbin.com/oqani/9/

Its dragging and dropping the images properly. But I am not able to get the current order of the images after user done with sorting images. Once I'll get current order I have to save that order in db for that particular image.

Suppose I have images 1, 2, 3, 4, 5, 6, 7, 8, 9 order then I resorted images and the order became 1, 3, 4, 7, 8, 2, 5, 6, 9. So on click of "Show Order" button it should show me the order as 1, 3, 4, 7, 8, 2, 5, 6, 9.

Can anyone please help me to show the current order of the images on click of "Show Order" button and also provide me some concept of how I'll put the current order for a particular image in DB.

Thanks

Solution 1

Yes, got it actually in jQuery UI there are some events like update, start etc, using which we can get new sort order.

Here is the final working demo: http://jsbin.com/oqani/10/

Solution 2

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
        });
    }
});

To update the database you need to write code in the update-sorting.php page:

<?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 
}
?>

Hope that helps.