Scriptaculous Sortables Frage

[Funkamedic]

Hallo liebe Selfhtml-Gemeinde,

ich habe ein kleines Problem bezüglich Scriptaculous Sortables, mit folgendem Sachverhalt:

Ich habe analog zu folgendem Link: http://www.tutorialspoint.com/cgi-bin/practice.cgi?file=scriptaculous_48 zwei Sortables Listen zwischen denen ich div-Container hin und herschiebe.
Die items in den Listen sind durchgängig numeriert und können nach dem Verschieben über serialize ausgelesen und via Ajax / php dann in einer Datenbank modifiziert werden. Soweit so gut. Nun möchte ich allerdings, dass sich die css-Class des verschobenen Objekts über

document.getElementById('divtodolist_2').className="topic_todo_done";

ändert. Ich habe allerdings immense Schwierigkeiten die Nummer des aktuell ausgelesenen Elements zu bestimmen, bzw. habe ich dafür keinen Teil der sortables-Klasse gefunden um (in diesem Beispiel) die "2" zu identifizieren.

Hat jemand Ideen?

Anbei noch die relevanten Teile des Quellcodes:

JS:

 window.onload = function() {  
       Sortable.create('todolist',  
       {containment: ['todolist','todolistdone'], dropOnEmpty: true, onUpdate:updateList});  
       Sortable.create('todolistdone',  
       {containment: ['todolist','todolistdone'], dropOnEmpty: true, onUpdate:updateList});  
   }  
   function updateList(container) {  
                        document.getElementById('divtodolist_2').className=\"topic_todo_done\";  
			var url = 'test.php';  
                        var containerid = container.id;  
			var params = Sortable.serialize(container.id);  
                        confirm(params); // nur um die Arrays der beiden Durchläufe auszugeben  
			var ajax = new Ajax.Request(url,{  
				method: 'post',  
				parameters: params  
                            });  
		}  
    function serialize(container, name){  
      $('display').innerHTML =  
      'Serialization of ' + $(container).id + ' is: <br/><pre>' +  
      Sortable.serialize( container,{ name:name} ) + '</pre>';  
   }

HTML:

<div id="todo_still"><ul id="todolist"><li id="todolist_1"><div class="topic_todo">  
                  <form action="">  
                  <div class="topic_todo_center">Hier steht dann die Aufgabe für dich.</div><div class="topic_todo_date"><i>Bis:</i> 28/04/11</div><div class="topic_todo_right"><img src="_inc/_images/icon_person.png" border="0" alt="Diese Aufgabe wurde dir zugewiesen von: " title="Diese Aufgabe wurde dir zugewiesen von: " /></div><div style="clear: both;"></div>  
                  </form>  
              </div></li><li id="todolist_2"><div id="divtodolist_2" class="topic_todo">  
                  <form action="">  
                  <div class="topic_todo_center">Hier steht dann die Aufgabe für dich. Diese Aufgabe ist mal ne längere Aufgabe. Gaaaaaaaaaaanz viel zu tun, jajaaja. Huiiiii!</div><div class="topic_todo_date"><i>Bis:</i> 28/04/11</div><div class="topic_todo_right"><img src="_inc/_images/icon_person.png" border="0" alt="Diese Aufgabe wurde dir zugewiesen von: " title="Diese Aufgabe wurde dir zugewiesen von: " /></div><div style="clear: both;"></div>  
  
                  </form>  
              </div></li><li id="todolist_3"><div class="topic_todo">  
                  <form action="">  
                  <div class="topic_todo_center">Und noch ne Aufgabe für dich.</div><div class="topic_todo_date"><i>Bis:</i> 28/04/11</div><div class="topic_todo_right"><img src="_inc/_images/icon_person.png" border="0" alt="Diese Aufgabe wurde dir zugewiesen von: " title="Diese Aufgabe wurde dir zugewiesen von: " /></div><div style="clear: both;"></div>  
                  </form>  
              </div></li></ul></div><h3>Erledigte Aufgaben:</h3><div id="todo_still"><ul id="todolistdone"><li id="todolistdone_4"><div class="topic_todo_done">  
  
                  <form action="">  
                  <div class="topic_todo_center">Hier steht dann die Aufgabe für dich.</div><div class="topic_todo_date"><i>Bis:</i> 28/04/11</div><div class="topic_todo_right"><img src="_inc/_images/icon_person.png" border="0" alt="Diese Aufgabe wurde dir zugewiesen von: " title="Diese Aufgabe wurde dir zugewiesen von: " /></div><div style="clear: both;"></div>  
                  </form>  
              </div></li><li id="todolistdone_5"><div class="topic_todo_done">  
                  <form action="">  
                  <div class="topic_todo_center">Hier steht dann die Aufgabe für dich. Diese Aufgabe ist mal ne längere Aufgabe. Gaaaaaaaaaaanz viel zu tun, jajaaja. Huiiiii!</div><div class="topic_todo_date"><i>Bis:</i> 28/04/11</div><div class="topic_todo_right"><img src="_inc/_images/icon_person.png" border="0" alt="Diese Aufgabe wurde dir zugewiesen von: " title="Diese Aufgabe wurde dir zugewiesen von: " /></div><div style="clear: both;"></div>  
  
                  </form>  
              </div></li><li  id="todolistdone_6"><div class="topic_todo_done">  
                  <form action="">  
                  <div class="topic_todo_center">Und noch ne Aufgabe für dich.</div><div class="topic_todo_date"><i>Bis:</i> 28/04/11</div><div class="topic_todo_right"><img src="_inc/_images/icon_person.png" border="0" alt="Diese Aufgabe wurde dir zugewiesen von: " title="Diese Aufgabe wurde dir zugewiesen von: " /></div><div style="clear: both;"></div>  
                  </form>  
              </div></li></ul></div>

Vielen Dank für eure Hilfe.
LG Funkamedic

[ChrisB]

Hi,

Nun möchte ich allerdings, dass sich die css-Class des verschobenen Objekts über

document.getElementById('divtodolist_2').className="topic_todo_done";

ändert.

Wozu?

Wenn es dir nur um die Formatierung geht, die ein Element bekommt, wenn es in einem Container abgelegt worden ist - dann nutze doch einfach den Nachfahrenselektor im CSS.

MfG ChrisB

[Matthias Apsel]

Om nah hoo pez nyeetz, Funkamedic!

Nun möchte ich allerdings, dass sich die css-Class des verschobenen Objekts über ... ändert.

Es gibt keine CSS-Klassen. HTML kennt Klassen, die über den Klassenselektor angesprochen werden können.

Matthias

[Gunnar Bittersmann]

@@Matthias Apsel:

nuqneH

Es gibt keine CSS-Klassen.

„Das hat dir der Teufel gesagt! Das hat dir der Teufel gesagt!“

Qapla'