search check home clock-o tag tags chevron-left chevron-right chevron-up chevron-down twitter facebook github rss comment comments terminal code

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

[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 '&lsaquo;pre&rsaquo;';
	print_r($aktualizacja);
	echo '&lsaquo;/pre&rsaquo;';
	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:
[PHP][MySQL][jQuery] Przeciągnij i upuść z zapisem do bazy danych z wykorzystaniem biblioteki jQuery - by Piotr Nalepa - widok bazy danych

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

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

  • Artur

    Dokładnie o takie coś mi chodziło :). Wielkie dzięki!

  • Comandeer

    Niezłe, ale można by to trochę ulepszyć:
    1) ‚Wersja nowoczesna’=>’wersja z PDO’ – skoro wiesz, że powinno się używać PDO, to dlaczego w artykule prezentujesz przestarzały opis?
    2) Czy zamiast tych 3 zapytań w pliku index.php nie wystarczy „set names utf-8”?
    3) Lepiej pliki JS wrzucać na koniec body, bo wrzucone do head blokują wyświetlanie strony (tabula rasa aż do wczytania się plików JS)
    4) Ja bym sobie jednak przefiltrował te dane z $_POST[‚items’] – zawsze może znaleźć się jakiś zapaleniec, który prześle ci UNION – w tym wypadku wystarczy array_map intval
    5) $kolejnosc=$kolejnosc 1 to to samo co $kolejnosc . Popatrz ile bajtów możesz zaoszczędzić ;D
    Tak poza tym, fajny artek. Na pewno użyję czegoś podobnego w moim CMS-ie

  • Dzięki za komentarz.
    1). Wersja z PDO powstała po napisaniu artykułu, dlatego została zamieszczona dodatkowo.
    2). Na podstawie mojego doświadczenia, wolałem wstawić te 3 zapytania, aby uniknąć jakichkolwiek problemów z językiem polskim.
    3). Są różne szkoły wrzucania plików JS. Ja preferuję wstawianie na koniec sekcji HEAD.
    4). Artykuł miał przedstawić sposób na osiagnięcie efektów. Nie skupiałem się na zabezpieczaniu skryptu. Jeśli ktoś by chciał go wykorzystać normalnie w Internecie, to musiałby zadbać o zabezpieczenia.
    5). Apropo tej $kolejności to mogłem wykorzystać zapis $kolejnosc++.

    To chyba tyle tytułem wyjaśnienia 😉

  • Drwal

    Nie działają linki:

    Wersja zaprezentowana w artykule: drag?n’drop ? wersja z mysql
    Wersja nowoczesna: drag?n’drop ? wersja z PDO

  • Piotr Nalepa

    nie działają ze względu na to, że manager plików został usunięty przeze mnie
    usunę te linki do plików

  • Marcin

    Witam serdecznie 🙂

    Naprawdę fajny toturial 🙂 gratuluję wiedzy 🙂

    Czy da się ograniczyć ruch do jednej płaszczyzny? (np. góra – dół) ?

    Wektor przemieszczenia miałby wówczas tylko jeden zdefiniowany kierunek.

  • Mate

    Demo nie działa.