Javascript div sortieren mit mootools

Kommentieren Feb 03 2009 .txt, .json, .md

Ich habe schon mal hier über das sortieren von divs gesprochen. Damals war das noch mit script.aculo.us verwirklicht.

Nun verwende ich mittlerweile aber eher Mootools. Daher schreibe ich mal hier wie man das selbe mit mootools macht.

Als Erstes brauchen wir natürlich mootools:

download mootools core Dazu brauchen wir noch die plugins:
mootools more builder (einfach Sortables markieren und es werden automatisch alle benötigten Dinge markiert)

Nun binden wir unsere mootools js scripte in die HTML( in den head Bereich ) Datei ein:

<script src="js/mootools.js" type="text/javascript" language="JavaScript"></script$gt;
<script src="/js/mootools-1.2-more.js" type="text/javascript" language="JavaScript"></script>

Nun brauchen wir noch die Liste bzw. Element die wir sortieren wollen.

<ul id="sortingDiv">
   <li name="el-1">Hallo</li>
   <li name="el-2">Hallo 1</li>
   <li name="el-3">Hallo 2</li>
   <li name="el-4">Hallo 3</li>
</ul>

Nun kommen wir zu dem Javascript Teil der die Element “sortierbar macht”:

window.addEvent('domready', function(){
   var mySortables = new Sortables('#sortingDiv', {
      constrain: true,
      clone: true,
      revert: true,
      onComplete: function(){
         storeOrder()
      }
  });

}

Was passiert da nun genau ? Wenn der Body nun fertig geladen ist holen wir uns das div/Element in dem unsere Liste enthalten ist. Danach werden alle li element nun bewegbar gemacht. Die Erklärung der einzelnen Optionen findat man hier.

Nun will man ja auch diese Sortierung irgendwie abspeichern. Dabei kommt das onComplete in Aktion. Damit legt man fest was am Ende der Sortierung gemacht werden soll. Dort ist eine function angegeben die ausgefürht werden soll.

fcuntion storeOrder {
var grpList = '';
var j=0;
// get the divs inside the sorting div
orderDivs = document.getElementById("sortingDiv").getElementsByTagName("li");
for (var i=0;i < orderDivs.length;i++) {
   var entryId = orderDivs[i].getAttribute('name');
   grpList += entryId + "=" + j + ";";
   j++;
}
// write those values into the hidden fields
document.getElementById('sortOrder').value = grpList;
}

Hier werden die Element nun nach der Reihenfolge im DOM ausgelesen und ein string ertellt. Dieser string ist komma separiert und wird in ein hidden input field abgelegt. Dieses feld kann man mit PHP aberbeiten und somit die Sortiertung abspeichern. Natürlich kann man anstelle auch gleich ein XHTTP Request machen das die Sortierung im Hintergrund abspeichert. Ist aber geschmackssache.

Das war es auch schon. Im Grunde nicht wirklich kompliziert.

Sollten noch Fragen offen sein, bin ich gerne bereit diese zu beantworten.

banana out.