Как сохранить порядок jQuery UI Sortable?

23.10.2019

1632

Сохранить сортировку после перетаскивания элементов 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>

HTML

Сохранение через 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>

HTML

Код файла save.php

<?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)));
	}
}

PHP

С помощью cookies

У каждого <li> добавлен атрибут data-id с порядковым номером. После перетаскивания значения из data-id собираются в массив и сохраняется в cookies в виде строки JSON, а при обновлении страницы порядок восстанавливается из них.

Для упрощения работы с cookie используется плагин jQuery Cookie.

<ul class="sortable-ul">
	<li data-id="1">Строка 1</li>
	<li data-id="2">Строка 2</li>
	<li data-id="3">Строка 3</li>
	<li data-id="4">Строка 4</li>
	<li data-id="5">Строка 5</li>
	<li data-id="6">Строка 6</li>
</ul>


<script src="/jquery/2.1.1/jquery.min.js"></script>
<script src="/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="/jquery.cookie.min.js"></script>

<script>
// Если есть запись в cookie, то восстанавливаем порядок.
if ($.cookie('sort')) { 	
	$.each(JSON.parse($.cookie('sort')), function(i, row){
		$('.sortable-ul').append($('.sortable-ul li[data-id=' + row + ']'));
	});
}

$('.sortable-ul').sortable({
	stop: function() {
		// Собираем все data-id в массив.
		var sort = [];
		$('.sortable-ul li').each(function(){
			sort.push($(this).data('id'));
		});

		// И сохраняем его в cookie в виде строки JSON.	
		$.cookie('sort', JSON.stringify(sort));
	}
});
</script>

HTML