[PHP][MySQL][jQuery] Przeciągnij i upuść z zapisem do bazy danych z wykorzystaniem biblioteki jQuery

W dzisiejszym artykule opiszę sposób na stworzenie systemu drag'n'drop (przeciągnij i upuść) z wykorzystaniem jQuery, PHP i bazy danych MySQL.
Nie będę ukrywał, że wpis ten jest zainspirowany wypowiedzią jednego z fanów tego bloga, jaka miała miejsce na Facebooku.

Technologia drag'n'drop może być wykorzystana do wielu rzeczy, na przykład do tworzenia układu strony, który będzie mógł być dostosowany przez użytkownika lub do stworzenia własnej listy zadań/priorytetów.
W przykładzie prezentowanym przeze mnie, będziemy tworzyć listę elementów, które będzie można przesuwać w inne miejsce na liście. Pozycja tych elementów będzie zapisywana do bazy danych, dlatego po odświeżeniu strony każdy będzie mógł zobaczyć układ elementów w takim stanie w jakim go zostawił.

Zaczniemy od utworzenia struktury listy. Musimy do niej dołączyć odczytywanie danych z bazy danych:

index.php
<div id="lewa">
<ul>
< ?php
      $query  = "SELECT * FROM items ORDER BY kolejnosc ASC";
      mysql_query('SET character_set_connection=utf8');
      mysql_query('SET character_set_client=utf8');
      mysql_query('SET character_set_results=utf8');
      $result = mysql_query($query);
 
      while($row = mysql_fetch_assoc($result))
      {
      ?>
<li id="items_<?php echo $row['id']; ?>">< ?php echo $row['id'].". ".$row['text']; ?></li>
 
      < ?php } ?>
</ul>
</div>
<div id="prawa">
 
Tablica elementów z bazy będzie wyświetlona tutaj.
</div>

Tutaj celowo umieściłem 3 dodatkowe linijki zapytań mysql_query, aby uniknąć problemów z odczytem polskich znaków z bazy danych.
Następną rzeczą jaką będziemy potrzebować, to biblioteka jQuery.UI. Jest ona niezbędna aby stworzyć efekt drag'n'drop. Paczka zawiera od razu standardową bibliotekę jQuery. Należy te pliki JavaScript dołączyć do sekcji HEAD strony.
Następnie dodajemy następujący wpis do naszego pliku:

index.php
 
$(document).ready(function(){
	$(function() {
		$("#lewa ul").sortable({ opacity: 0.6, cursor: 'move', update: function() {
			var order = $(this).sortable("serialize") + '&action=aktualizacja';
			$.post("updateDB.php", order, function(theResponse){
				$("#prawa").html(theResponse);
			});
		}
		});
	});
});

Jak pewnie zauważyłeś/aś, w powyższym skrypcie odwołujemy się do pliku updateDB.php, dlatego teraz przejdziemy do stworzenia takowego pliku.

updateDB.php
 
require("db.php");
 
$action = mysql_real_escape_string($_POST['action']);
$aktualizacja = $_POST['items'];
 
if ($action == "aktualizacja"){
 
	$kolejnosc = 1;
	foreach ($aktualizacja as $id) {
 
		$query = "UPDATE items SET kolejnosc = " . $kolejnosc . " WHERE id = " . $id;
		mysql_query($query) or die('Błąd zapytania SQL');
		$kolejnosc = $kolejnosc + 1;
	}
 
	echo '‹pre›';
	print_r($aktualizacja);
	echo '‹/pre›';
	echo 'Jeśli odświeżysz stronę to zobaczysz elementy ustawione tak jak zapisałeś/aś.';
}

Dla przejrzystości kodu musiałem użyć znaczników w wersji ANSI: lsaquo to < oraz rsaquo to >. Znaczniki ANSI trzeba będzie podmienić na zwykłe w pliku PHP.
Dodatkowo musisz utworzyć plik z danymi do łączenia się bazą danych. Możesz wykorzystać jeden z tych, który zamieściłem w jednym z poprzednich tutoriali.
Jako że, odwołujemy się do bazy danych, to musimy ją też utworzyć wedle następującego wzoru:

To by było wszystko. Demo z tego artykułu możesz zobaczyć tutaj: jquery drag and drop

Źródło: źródło