Как отсортировать изображения в 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 
}
?>

Надеюсь, это поможет.

Answer 2

Да, действительно, в jQuery UI есть некоторые события, такие как update, start и т. Д., С помощью которых мы можем получить новый порядок сортировки.

Вот последняя рабочая демонстрация: http://jsbin.com/oqani/10/