Video-Tutorial: HTML-Listen per jQuery UI sortierbar machen
Im Video-Tutorial Einfacher AJAX-Request mit Hilfe von jQuery hatten wir bereits das beliebte Javascript-Framework im Einsatz. Heute ist es natürlich wieder mit an Bord, wenn auch die Erweiterung jQuery UI das eigentliche Objekt unserer Begierde ist.
Im heutigen Tutorial soll es darum gehen, eine einfache unformatierte HTML-Liste (<ul><li></li></ul>) für den Benutzer sortierbar zu machen. Das bedeutet, die Einträge bleiben nicht in ihrer ursprünglichen Sortierung erhalten, sondern der Nutzer kann das letzte Element an die erste Position schieben und umgekehrt. Für dieses Vorhaben greifen wir auf die jQuery UI – Funktion sortable() zurück.
Nach der Sortierung möchten wir die neue Reihenfolge zusätzlich noch in einem span-Element ausgeben, wofür uns die jQuery – Funktion each() zur Verfügung steht. Wer aufgepasst und sich die AJAX Total Artikelserie durchgelesen hat, wird auch leicht rausfinden, wie man die Sortierung per AJAX an eine PHP-Datei schickt und dann in einer Datenbank abspeichert. Falls ich mich da täusche und Bedarf an einer Erweiterung dieses Video-Tutorials besteht, lasst es mich wissen.
Diesmal konnte ich das Video (da kürzer als 15 Minuten) wieder auf Youtube hochladen. Wie immer empfehle ich das Betrachten der 1080p-Variante. Viel Spaß :)
Der Quellcode der index.html
Auch den finalen, vollständigen Quellcode möchte ich euch natürlich nicht vorenthalten.
Dieser Artikel wurde am 24.01.2012 veröffentlicht
Wer schreibt hier?
Hi, ich bin Torben und baue leidenschaftlich gerne Webseiten. Also habe ich mein Hobby zum Beruf gemacht und bin seit 2008 als Webentwickler Selbständig tätig. Obwohl ich schwerpunktmäßig für Kunden arbeite habe ich auch sehr viel Freude an der Realisierung eigener Projekte. Daraus resultierend hat sich eine große Affinität zu den Themen Online Marketing und Suchmaschinenoptimierung entwickelt. Gelegentlich schreibe ich auf Twitter, viel aktiver bin ich allerdings auf Facebook. Gerne können wir uns dort vernetzen!
Schöne Tutorials!
Nur ein Hinweis von meiner Seite, da ich selber erst kürzlich darüber gestolpert bin. jQuery bietet mit .map() eine schöne Methode an, aus einer Liste von jQuery-Objekten ein Array oder einen String zu erstellen.
Für Dein Beispiel:
$("#list li").map(function() {
return $(this).data("number");
}).get().join(", ");
Sehr gute Anmerkung Thomas, vielen Dank dafür!
Für Geübte sicher eine geeignete Methode, die Funktionsweise noch flexibler zu gestalten. In meinen Einsteiger-Tutorials versuche ich jedoch immer den möglichst simplen Weg zu finden, auch wenn das manchmal auf Kosten der Performance geschieht. Bei deiner Methode kommen eben nochmals zwei Funktionen (get/join) hinzu, die es zu erklären gilt ;-)
Super Tutorial. jQuery ist einfach super, ich verwende es auch ständig. Kleiner Tip, einfach mal nach „jQuery Mobile“ googlen :-)
Wenn ids bei den Listenelementen benutzt werden würden, könnte man einfach die Methode .sortable( „toArray“ ) benutzen um die aktuelle Reihenfolge zu erhalten.
Halte ich persönlich für keinen sauberen Weg. IDs sind dafür da den Inhalt der Elemente zu deklarieren und nicht umgekehrt :)
Könnte mir jemand ein Beispiel machen wie ich den String mit der Reihenfolge an PHP übergeben kann? Wäre super … würde das ganze für Einsteiger erleichtern ;-)
Hallo Dominik,
alles klar, werde in den nächsten Tagen ein entsprechendes Tutorial fertig machen :)
Viele Grüße,
Torben
super videos! einfach und klar. gerne mehr davon :-)
ein geiles teil.. das gefällt mir. damit kann tolle sachen realisieren.. z.b. eine fotogalerie nach themen sortiern.. super!