How to sort images in jquery / php / mysql in the same way as google picassa reordering interface?

Question

I am using PHP / MYSQL.

I want to create an image gallery for sorting images. The user will drag and drop images to sort and organize the images. Like Picassus, do it.

I created the page using the jQuery UI custom plugin: http://jqueryui.com/demos/sortable/#display-grid

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

Its proper drag and drop images. But I can’t get the current order of the images after the user has sorted the images. As soon as I receive the current order, I have to save this order in db for this particular image.

Suppose I have images 1, 2, 3, 4, 5, 6, 7, 8, 9 , then I resorted to images, and the order became 1, 3, 4, 7, 8, 2, 5, 6, 9 . Therefore, when you click the "Show Order" button, he should show me the order 1, 3, 4, 7, 8, 2, 5, 6, 9 .

Someone can help me show the current order of images when I click the "Show Order" button, and also give me some idea of ​​how I will put the current order for a specific image in the database.

thank

Answer 1

, jQuery UI , update, start .., .

: http://jsbin.com/oqani/10/

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

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

, .