Например, имеем список элементов:
<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`)
");