Javascript sortieren (liste,div etc.)

UPDATE:

Hier gibt es einen aktuelleren Arktiel wie das auch mit mootools funktioniert.

So hier mal kurz eine Zusammenfassung wie man eine Liste von Dingen per Drag and drop im Browser sortieren kann.

Als erstes braucht man die Scriptaculous JS Bibilothek: script.aculo.us

Nun erstellt man ein Verteichnis in das man die js Dateien aus dem src Ordern aus dem entpackten script.aculo.us Archiv kopiert. Dazu kommt noch die prototype.js aus dem lib Ordern (ebenfalls aus dem entpackten script.aculo.us Archiv)

Das Folgende kommt in den Kopf Bereich der HTML Seite:

<script language="JavaScript" src="/javascript/prototype.js"></script>
<script language="JavaScript" src="/javascript/scriptaculous.js"></script>

Ihr müsst nur noch den Pfad anpassen.

Jetzt braucht ihr noch eine Liste oder Divs die Sortiert werden sollen:

<div id="sortContainer">
  <div name="1">Inhalt</div> 
  <div name="2">Inhalt2</div>
  <div name="3">Inhalt3</div>
  <div name="4">Inhalt4</div>
</div>

Das Ganze kann man natürlich auch noch mit classen und styles versehen. Also keine Angst, dass irgendwas dabei kaputt gehen könnte.

Jetzt kommt nun NACH DER SORTIER LISTE !! folgendes:

<script language="JavaScript">
Sortable.create("sortContainer",{tag:'div'});
</script>

Da wir ja keine Liste haben, sondern div muss man nun angeben welche Tags innerhalb des Elementes mit der ID sortContainer sortiert werden können. Folgendes macht das selbe aber macht nur div Element mit der id moveAble moveAble2 sortierbar

<script language="JavaScript">
Sortable.create("sortContainer",{tag:'div',only:['moveAble','moveAble2']});
</script>

Nun sollte man in der Lage sein die Elemente nach belieben sortieren zu können. So nun kann man ja das alles schon sortieren aber mann muss sich das ja auch merken. Also kommt noch eine kleine Javascript Funktion die die Sortierung ausliest:

function getOrder() {
  var orderList = '';
  divs = document.getElementById("sortContainer").getElementsByTagName("div");
  for (var i=0;i < divs.length;i++) {
    orderList += divs[i].getAttribute('name') + ', ';
    }
  alert(orderList);
}

Nun kommen die divs in der Reihenfolge wie sie in dem DOM angezeigt werden und auch hinterlegt sind. Damit diese Funktion auch aufgefuren wird, muss die Sortable.create Funktion von oben erweitert werden.

Sortable.create("sortContainer",{tag:'div',only:['moveAble','moveAble2'], onUpdate: getOrder});

Bei onUpdate gibt man die Funktion an die nach einer verschieben Aktion ausgeführt werden soll an. Mehr Informationen zu den Optionen gibt es hier: Sortable.create

Anhand von name="" kann man nun festlegen welcher Eintrag nun an welcher Position ist. So sollte der String aussehen:

1=2;2=3;3=0;4=4;

Diesen String kann man nun in ein hidden filed schreiben und danach via POST an PHP übergeben. PHP baut sich den String auseinander und speichert dann die Positionierung ab. Und kann anhand des Wertes aus name="" sagen, dass Element 1 hat die Position 2.

Sollte man mal verschachtelte Sortierungen haben, dann muss man beachten, dass der Sortable.create Befehl von innen nach aussen Aufgerufen werden muss. Also erster das innere Soriertfeld und dann das äussere.

Hier ein Blogeintrag der mit geholfen hat dies alles zu verstehen: drag and drop with javascript