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

Answer 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/