Как передать отсортированные картинки на сервер?

Question

[Voll .]

Есть библиотеки которые позволяют сортировать элементы:
https://github.com/voidberg/html5sortable
https://github.com/RubaXa/Sortable
jquery UI sortable
После их приминения, нужно передать данные на сервер и сохранить изминения, как это лучше всего сделать?
Данный в форме выводить как картинки? Как обновить приоритет, по которому они отсортированы?

Answer 1

[Vasily Novosad]

Например, имеем список элементов:

<ul class="my-ul">
    <li data-image-id="1"></li>
    <li data-image-id="2"></li>
    ...
    <li data-image-id="26"></li>
</ul>

Если использовать Sortable от RubaXa, то нужно повесить функцию на событие onUpdate, чтобы по завершению сортировки иметь массив с ID картинок в нужном отсортированном порядке:

new Sortable(document.querySelector('.my-ul'), {
        onUpdate: function (e) {
            
            var data = {
                nodesList: []
            };

            // обходим все сортируемые элементы
            [].forEach.call(e.target.childNodes, function (children) {
                
                // формируем массив с ID в нужном порядке
                data.nodesList.push(children.getAttribute('data-image-id'));
            });
            
            // отправляем объект "data" на сервер
            // ...
        }
    });

Далее, на сервере остается только обновить записи в BD, точнее, всего лишь одно значение отвечающее за порядок вывода картинки:

$valuesArray = array();

# формируем массив для записи в DB
foreach ($idsArrayOfSort as $range => $imageId) {
    $valuesArray[] = "('" . $imageId . "', '" . ($range + 1) . "')";
}

$db->query("
INSERT INTO
    `table`
(`image_id`, `image_range`)
VALUES
    " . implode(', ', $valuesArray) . "
ON DUPLICATE KEY UPDATE
    `image_range` = VALUES(`image_range`)
");

Comments

[Vasily Novosad]

Случайно допустил ошибку в JavaScript, поэтому будьте внимательны, если будете копировать код