Сохранить сортировку после перетаскивания элементов UI Sortable можно несколькими способами:
Форма со скрытыми полями
Список выводится из базы данных отсортированный по полю `sort`
. В каждом элементе списка находится input[type=hidden]
с названием sort[]
и содержащий id записи.
После отправки формы, скрипт в цикле переберёт массив $_POST['sort']
и обновит порядок записей.
<?php
$dbh = new PDO('mysql:dbname=db_name;host=localhost', 'логин', 'пароль');
// Сохранение сортировки
if (!empty($_POST['sort'])) {
foreach ($_POST['sort'] as $i => $row) {
$sth = $dbh->prepare("UPDATE `table` SET `sort` = :sort WHERE `id` = :id");
$sth->execute(array('sort' => ++$i, 'id' => intval($row)));
}
}
$sth = $dbh->prepare("SELECT * FROM `table` ORDER BY `sort`");
$sth->execute();
$array = $sth->fetchAll(PDO::FETCH_ASSOC);
?>
<form action="" method="post">
<ul class="sortable-ul">
<?php foreach ($array as $row): ?>
<li>
<?php echo $row['name']; ?>
<input type="hidden" name="sort[]" value="<?php echo $row['id']; ?>">
</li>
<?php endforeach; ?>
</ul>
<button type="submit">Сохранить порядок</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
$('.sortable-ul').sortable();
</script>
Сохранение через AJAX
Метод похож на вариант с формой, но работает без перезагрузки страницы. После изменения порядка вызывается метод stop
, в котором все input hidden отправляются через POST AJAX на save.php.
<?php
$dbh = new PDO('mysql:dbname=db_name;host=localhost', 'логин', 'пароль');
$sth = $dbh->prepare("SELECT * FROM `table` ORDER BY `sort`");
$sth->execute();
$array = $sth->fetchAll(PDO::FETCH_ASSOC);
?>
<ul class="sortable-ul">
<?php foreach ($array as $row): ?>
<li>
<?php echo $row['name']; ?>
<input type="hidden" name="sort[]" value="<?php echo $row['id']; ?>">
</li>
<?php endforeach; ?>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
$('.sortable-ul').sortable({
stop: function() {
$.ajax({
url: '/save.php',
method: 'post',
data: $('.sortable-ul input').serialize()
});
}
});
</script>