jQuery sortable php i mysql

W artykule pokażę kompleksowo (zarówno po stronie klienta jak i serwera) jak stworzyć za pomocą jquery UI sortable sortowalną listę elementów metodą drag and drop. jquery sortable

Na początku należy stworzyć bazę danych. Jednym z pól musi być pozycja elementu.

CREATE TABLE elements (
id INT UNSIGNED NOT NULL AUTO_INCREMENT PRIMARY KEY,
name VARCHAR(100) NOT NULL,
position INT UNSIGNED NOT NULL
);

Teraz czas na bardzo prostą implementację w php. Zanim do tego przejdziemy trzeba wypełnić tabelę w bazie jakimiś danymi. Pobieramy z bazy danych elementy z tabeli i wyświetlamy je w liście nieuporządkowanej. Wszystko jest zawarte w formularzu. W każdym elemencie li umieszczamy ukrytego inputa, aby przekazać za jego pomocą do skryptu id elementu.

$con = mysql_connect('localhost', 'user', 'pass');
$db = mysql_select_db('dbname', $con);
<form method="post" action="<?php echo $_SERVER['PHP_SELF']?>">
 
<ul id="list">
<?php
$result = mysql_query("SELECT id, name, position FROM elements ORDER BY position");

while ($row = mysql_fetch_assoc($result)) 
{
	echo '<li><input type="hidden" name="element[]" value="'.$row['id'].'" />'.$row['name'] .'</li>';
}
?>
</ul>
</form>

Będziemy przechwytywać tablicę $_POST['element'], w której będzie zapisana kolejność elementów. Następnie dokonujemy aktualizacji w bazie danych. Implementacja mechanizmu drag and drop do jedna linijka w jquery.

$('#list').sortable();

W zdarzeniu update jquery sortable wysyłamy ajaxowo dane z formularza. Dzięki temu update do bazy idzie automatycznie gdy zmieniamy kolejność elementów listy. Pełny kod poniżej:

<?php
$link = mysql_connect('localhost', 'user', 'pass');
$db = mysql_select_db('dbname', $link);
 
if ($_POST) {
	$i=1;
	foreach ($_POST['element'] as $id) {
	$result = mysql_query("UPDATE elements SET position=".$i." WHERE id=". mysql_real_escape_string($id));
	$i++;
	}
}
?>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('#list').sortable({
		update: function(event, ui) {
			$.ajax({
			url: '/',
			data: $("form").serialize(),
			type: 'POST',
			success: function() 
			{
				//kod dla sukcesu
			}
			});
		}
	});
});
</script>
<form method="POST" action="<?php echo $_SERVER['PHP_SELF']?>">
<ul id="list">
<?php
$result = mysql_query("SELECT id, name, position FROM elements ORDER BY position");
while ($row = mysql_fetch_assoc($result)) 
{
	echo '<li><input type="hidden" name="element[]" value="'.$row['id'].'" />'.$row['name'].'</li>';
}
?>
</ul>
</form>