Hallo RIDER! :)

Also ich hab die Steuerung schlussendlich doch noch hinbekommen wie ich es wollte, aber wow, das war echt der reinste brainfuck! :D

Der Steuerungsmechanismus stellt ja schon für sich alleine genommen eine Knobelaufgabe dar, aber es kommen ja auch noch die Animationen zum Ein- und Ausblenden der Boxen dazu, bzw. dazwischen...

Fünf Funktionen verteilt auf 223 Zeilen Code (ohne Einrückungen oder Zeilenabstände) - der reinste Alptraum! - Aber es läuft!

Jetzt bleiben eigentlich nur noch zwei Fragen zu dem Thema, bei denen ich nicht so wirklich weiterkomme:

1. Verzögerung der Funktionsausführung, solange Animation läuft

Bislang hatte ich es auf der Seite immer so gehandhabt, dass ich vor jede Funktion, die mit einer laufenden Animation kollidieren könnte, einfach eine Bedingung gesetzt habe im Sinne von:

element1.addEventListener("click",function(){  
if((element2.style.animationPlayState=="running")  
||(element3.style.animationPlayState=="running")){}  
else{ /* ... */ }});

Das hat aber natürlich erstens den Nachteil, dass, wenn irgendwas läuft, eben beim Click auf das Element nichts passiert und man dann nochmal draufclicken muss, was irgendwie einen touch von "funktioniert nicht richtig" hat, und zweitens ist diese Art der Konfliktvermeidung wohl ziemlich unbrauchbar, wenn man keine statischen, in überschaubarer Menge vorliegenden, sondern wie ich hier in diesem Fall, unzählige dynamisch erstellte Elemente hat!

Ich dachte daran, vieleicht dem "boxContainer", der ansich keine Klassenbezeichnung hat, mit jedem Animationsstart einen boxContainer.className="running" und mit jedem Animationsende einen boxContainer.className="clear" mit auf den Weg zu geben, und dann so etwas wie eine while-Schleife zu installieren, also while(boxContainer.className=="running"){} oder so, aber wie könnte ich das umsetzten? - Habe Angst davor, mit while herumzuexperimentieren, nachdem ich doch zuletzt meinen Browser damit schachmatt gesetzt habe! ;)

2. Hüpfende Boxen in der Ablage

Zwar habe ich es geschaft mit einer Manipulation von .insertBefore (dessen Spiegelfunktion wahrscheinlich aus sprachhygienischen Gründen nicht implementiert wurde...) dafür gesorgt, dass wenn man auf eine Box in der Ablage clickt und diese 'Ablagebox' dann ausgeblendet wird, selbige umgehend in der Ablage ans Ende gesetzt wird, aber natürlich hinterlässt sie beim Ausblenden eine Lücke, die dann von den anderen Boxen, die ggf. sich noch darunter befinden, eher ungeschmeidig geschlossen wird.

Aber ich nehme an, da kann man nichts machen, abgesehen davon, jeder "Ablagebox" noch einen unsichtbaren Rahmen mitzugeben, den man dann mit CSS so animiert, dass er sich nach dem Ausblenden der "Ablagebox" langsam verkleinert... hmm...nochmehr Code! D:

Tja mal sehen, aber falls du mir das mit der while-Schleife irgendwie idiotensicher verklickern könntest, wäre das der Wahnsinn! ;)

Wie immer,

Dank und Gruß,

Roadster.