Сортировка блоков через jQuery UI и запись, сохранение позиций в базу данных

В этой статье мы рассмотрим пример использования jQuery UI для сортировки блоков и запись их новых позиций в базу данных.

Создадим небольшую таблицу в нашей базе данных


При выводе записей на страницу мы сортируем их по столбцу `s`
SQL запрос: SELECT * FROM `my_item` ORDER BY `s` asc

Подключаем скрипты

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

Выводим наши блоки из базы данных
Сортируемые элементы должны быть в контейнере с идентификатором sortable.

<div id="sortable">

<?php
// выводим наши блоки
$sql=$mi->query("SELECT * FROM `table` ORDER BY `s` asc");
while($d=$sql->fetch_array()):
	print '<div id="item-'.$d["id"].'">'.$d["name"].'</div>';
endwhile;
?>

</div>

Важно! У каждого элемента должен быть идентификатор вида item-N, где N - это уникальный идентификатор из нашей таблицы (число, находящееся в столбце `id`).

Немного js кода

<script type="text/javascript">
$(document).ready(function() {
	$('#sortable').sortable({
		axis: 'y', 
		cursor:'move',
		update: function (event, ui) {
			var data = $(this).sortable('serialize');
			$.ajax({
				data: data,
				type: 'POST',
				url: '_ajax.php',
				success:function(html){
					$("#result").html(html);
				}
			});
		}
	});
});
</script>

Содержимое файла _ajax.php

<?php
// вводим переменную
$i=1;
foreach($_POST['item'] as $value):
     // $value - это постоянный идентификатор элемента (id)
     // обновляем таблицу
     //	$i - это новая позиция элемента, её мы и вносим в столбец `s`
     $mi->query("update `table` set `s`='$i' where `id`='$value'");
     $i++;
endforeach;
?>

Демонстрация