DIV mit Animation verschieben + Callback

[DiDiJo]

Hi Leute,

ich habe in meinem CMS ein Modulsystem aufgebaut wo ich verschiedene Module auf einer Seite einfügen kann. Diese können dann innerhalb Ihres Bereiches sortiert werden. Im CMS habe ich also ein Bereich mit mehreren DIVS die alle den Namen des Moduls und ein Paar Knöpfe zu editerien / sortieren haben und nebeneinander stehen (stellt euch einfach mehrere Rechtecke nebeneinander vor):

[Modul 1] [Modul 2] [Modul 3] [Modul 4]
[Modul 5] [Modul 6] [ + neues Modul +]

So. Beim Sortieren machen ich momentan einen neuen Seitenaufruf und baue die Seite komplett neu auf. Ich habe mir aber gedacht ich könnte die Sachen einfach per JS animieren und per Callback einfach meine Module in der DB umpositionieren.

Kennt jemand ein Plugin um ein Element im DOM umzupositionieren und zwar am besten mit Animation + Callback-Funktion.

 

[chmee]

Benutzt Du ein Framework? jQuery?

Nimm doch bitte mal jsfiddle zur Hand, stell Dein HTML/CSS-Gerüst zur Verfügung, dann kann man darüber sinnieren, wie man es am Besten anstellt.

mfg chmee

 

[DiDiJo]

also jquery benutze ich aber diese jsfiddle kenne ich noch nicht.

meine html struktur sieht momentan so aus:

<div id="modulesCenter">
<div class="moduleBox"></div>
<div class="moduleBoxSpacer"></div>
<div class="moduleBox"></div>
<div class="moduleBoxSpacer"></div>
<div class="moduleBox"></div>
<div class="moduleBoxSpacer"></div>
</div>

ich sehe gerade das ich mir den spacer auch sparen kann und einfach meinen gewünschten abstand per css regeln kann.

im grunde genommen könnte ich so arbeiten:

<div id="modulesCenter">
   <div class="moduleBox"></div> 
   <div class="moduleBox"></div>
   <div class="moduleBox"></div>
</div>

so hier ein beispiel:
http://jsfiddle.net/r7MgY/8920/

 

[chmee]

http://jsfiddle.net/r7MgY/8921/ ( wie kommst Du nur auf Version 8920? )

Zur Beweglichkeit. Man stelle sich eine Kette von Modulen vor, wo man Module um eine Stelle vor oder zurück animiert. Hab ich das richtig verstanden?

mfg chmee

 

[DiDiJo]

genau ich habe quadratische Module (divs) die ich verschieben möchte ... wobei eigentlich möchte ich entweder ein modul vor oder zurück verschieben (animieren) oder ein modul ganz nach vorn bzw. ganz ans ende (das hatte ich vergessen) oder auch ganz entfernen. ob ich das jetzt mit ein div konstrukt oder einer ul / li liste mache ist eigentlich egal ... aufgebaut ist mein system aber in dem oben aufgeführten div-konstrukt

so wäre es jetzt korrekt:

<div id="modulesCenter">
    <div class="moduleBox">1<br/><a href="#">&lt;&lt;</a> <a href="#">&lt;</a> - <a href="#">&gt;</a> <a href="#">&gt;&gt;</a></div>
    <div class="moduleBox">2<br/><a href="#">&lt;&lt;</a> <a href="#">&lt;</a> - <a href="#">&gt;</a> <a href="#">&gt;&gt;</a></div>
    <div class="moduleBox">3<br/><a href="#">&lt;&lt;</a> <a href="#">&lt;</a> - <a href="#">&gt;</a> <a href="#">&gt;&gt;</a></div>
    <div class="clear"></div>
</div>