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