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.