Sortierbare Liste mit Drag & Drop in Ajax
Erstellt von Patrick Matsumura am 20.11.2008
| 52 KommentareIn diesem Tutorial möchte ich erklären, wie man mit script.aculo.us und dem Javascript Framework Prototype eine sortierbare Liste mit Drag & Drop-Funktionalität aufbaut. Der Clou an der Sache ist, dass die Liste sich ihren Zustand dauerhaft merken wird. Damit das einwandfrei funktioniert, ist es notwendig die Informationen zu speichern. Als Datenspeicher dient eine MySQL Datenbank.
Hier sind vorab die Links zur Vorschau und zum Download der Tutorialfiles.
Zunächst braucht man Prototype und script.aculo.us. Danach werden die Javascript-Dateien in einen Ordner gespeichert und in die HTML-Datei eingebunden. Ich habe die Javascripts in den Ordner “js” gespeichert. Man sollte unbedingt darauf achten, dass Prototype VOR script.aculo.us eingebunden wird.
So bindet man die beiden Bibliotheken ein:
<script src="/js/prototype.js" type="text/javascript"></script> <script src="/js/scriptaculous.js" type="text/javascript"></script>
Nachdem das Grundgerüst steht, kann ich mit der MySQL Datenbank anfangen. Dazu lege ich mir eine Tabelle mit folgendem Code an:
CREATE TABLE `sortable_ajax_list` ( `ID` TINYINT(4) NOT NULL AUTO_INCREMENT PRIMARY KEY , `list_value` VARCHAR(64) NOT NULL , `sort_order` TINYINT(4) NOT NULL ) ENGINE = MYISAM
Ich erkläre kurz die Bedeutung der einzelnen Felder. ID wird benutzt um einen eindeutigen Bezeichner für jeden Datensatz zu haben. Dieser Wert erhöht sich durch das AUTO_INCREMENT automatisch um eins, sobald ein neuer Datensatz angelegt wird. Gleichzeitig ist ID auch der Primary Key. Im Feld list_value speichere ich den Wert des Listenelements und in sort_order wir die Sortierreihenfolge festgehalten.
Damit sind die beiden Bibliotheken eingebunden und Die MySQL Tabelle angelegt. Als nächstes werde ich eine HTML-Liste mit einem kleinen Stück PHP-Code generieren. Der Code soll die aktuelle Bezeichnung und die Reihenfolge der Listenelemente aus der Datenbank laden und entsprechend darstellen.
Aber vorher will ich noch eine kleine Konfigurationsdatei für alle weitern PHP-Scripts anlegen. In dieser Datei werden die Logindaten für die Datenbank eingetragen und die Verbindung hergestellt. Diese Datei nenne ich config.php und speichere sie in meinem Stammverzeichnis ab.
<? #### # Konfigurationsdaten für die Datenbank #### $dbhost = 'localhost'; $dbuser = 'benutzer'; $dbpass = 'passwort'; $dbname = 'meine_db'; $connection = mysql_connect($dbhost, $dbuser, $dbpass); // Stellt die Verbindung zur Datenbank her mysql_select_db($dbname, $connection); // Wählt die entsprechende Datenbank aus ?>
Nachdem ich jetzt meine Konfiguration fertig habe, kann ich sie in die HTML-Datei einbinden. Auch kann ich meine MySQL-Datenbank abfragen und so die Liste erzeugen. Das sieht nun so aus:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sortable List in Ajax</title>
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js" type="text/javascript"></script>
</head>
<body>
<ul id="ajax_liste">
<?php
include_once('config.php'); //Konfigurationsdatei einbinden
$result = mysql_query("SELECT * FROM sortable_ajax_list ORDER BY sort_order"); // Anfrage an die Datenbank stellen und Ausgabe sortieren
while($data = mysql_fetch_array($result))
{
echo '<li id="item_'. $data[ID] .'">'. $data[list_value] .'</li>';
echo "\n";
}
?>
</ul>
</body>
</html>
Jetzt, wo die Liste vom PHP-Code generiert wurde, soll sie auch noch sortierbar sein und sich ihren Zustand merken. Das Speichern soll nicht “spürbar” sein und darum machen wir den Request mit Ajax.Request von Prototype. Die Aktualisierung soll nach jeder Änderung der Reihenfolge vorgenommen werden. Darum setze ich den Request in die onUpdate Methode und übermittle an die PHP-Datei “sort_function.php” die serialisierten Daten der Liste. Der Code dafür sieht so aus:
<script type="text/javascript">
Sortable.create("ajax_liste",
{
onUpdate:function()
{
new Ajax.Request('sort_function.php',
{
method: "post",
parameters: {data: Sortable.serialize("ajax_liste")}
});
}
});
</script>
Wichtig: Das Javascript muss im HTML-Code NACH der Liste kommen, sonst wird es nicht angewendet. Als nächstes brauche ich die Funktion zum Speichern der Reihenfolge. Diese schreibe ich in die Datei “sort_function.php” und speichere sie in meinem Stammverzeichnis. Das ganze sieht so aus:
<?php
include_once('config.php');
parse_str($_POST['data']);
for ($i = 0; $i < count($ajax_liste); $i++) {
if(is_int($i)) {
mysql_query("UPDATE sortable_ajax_list SET sort_order = $i WHERE ID = $ajax_liste[$i]");
}
else {
exit;
}
}
?>
Man sollte beachten, dass in diesem Codestück nur wenig Überprüfung der übermittelten Daten erfolgt. Das kann unter Umständen missbraucht werden, um schädlichen Code einzuschleusen. Also ist es wichtig, die Daten zuerst genauer zu prüfen und dann zu speichern.
Jetzt ist alles fertig und die Liste kann sortiert und ihr Zustand gespeichert werden.
Kommentare und Verbesserungsvorschläge sind erwünscht.
Bis zum nächsten Tutorial,
Patrick
