Narses - Sa 10.07.10 13:37
Titel: JavaScript/DOM: Zwei Nodes tauschen (aber ohne Kopieren!)
Moin!
Ich hab mich ja schon als JS/DOM-Noob geoutet, also frisch weiter (sonst bleibt das ja so :?)... ;)
Ich habe eine Tabelle, deren Einträge von den Usern sortiert werden sollen/müssen. Beispiel:
Quelltext
1:
2:
3:
4:
| Eintrag 1 | v
Eintrag 2 | v^
Eintrag 3 | v^
Eintrag 4 | ^ |
Die Icons am Ende setzen das Sortierkriterium in der Datenquelle, beim Reload der Seite ist dann die Reihenfolge geändert. Funktioniert, soweit, sogut bzw. schlecht. :|
Die User nörgeln nun - zu recht! :roll: - dass die Reloads nerven und dass man nur in 1er-Schritten was ändern kann (wenn man einen neuen Eintrag erzeugt, steht der natürlich ganz unten und muss ggfs. weit nach oben; dafür habe ich bisher Top-Down-Controls zusätzlich, so dass die Distanz zumindest halbiert wird; jaja, gut ist was anderes :oops:).
Also, Daten per AJAX in der Tabelle ändern (kein Problem :)) und die Nodes im DOM-Baum umhängen (das ist das Problem! :shock:). Hier brauche ich mal eure Hilfe: wie tauscht man die beiden TR-Nodes, ohne eine Kopie eines davon anzulegen? Irgendwie hat das Netz nix hergegeben, mit dem ich was anfangen konnte... :nixweiss: Oder geht das gar nicht ohne Kopieren eines Nodes? :gruebel:
Hat da jemand schon eine Lösung oder wie macht ihr das? :beer:
cu
Narses
Moderiert von 
Christian S.: Topic aus JavaScript - Sprachelemente verschoben am Di 25.03.2014 um 19:51
Yogu - Sa 10.07.10 15:34
Moin Narses,
mit der Funktion
insertBefore(movingNode, referenceNode) [
http://de.selfhtml.org/javascript/objekte/node.htm#insert_before] kannst du einen Konten an einer beliebigen Stelle einfügen. Der Knoten wird dabei von der alten Position entfernt und an die neue eingetragen.
In deinem Fall:
Quelltext
1:
| movingNode.parent.insertBefore(movingNode, knotenDrunter); |
Jetzt musst du nur noch wissen, welcher Knoten der unter der neuen Position ist. Aber je nachdem, wie du das Verschieben implementiert hast (per Drag&Drop?) dürfte das ja nicht allzu schwer sein.
Grüße,
Yogu
BenBE - Sa 10.07.10 15:35
Grad aus'm Kopf, weiß nicht, ob das so passt, sollte aber:
Quelltext
1:
| node.parent.insertBefore(node, node.previousSibling); |
HTH. Ansonsten einfach mal insertBefor mal anschauen. Da gibt es im Netz genug Beispiele. insertAfter gibt's nicht direkt; findet sich im Netz aber auch ein Shortcut dafür ;-)
Martok - Sa 10.07.10 16:44
Wobei das zumindest in Firefox einen Bug hat: User Defined Properties gehen dabei verloren. Beispiel:
Quelltext
1:
2:
3:
4:
| var foo=$('#myele');
foo.someProp = 123;
$('#other').appendChild(foo);
alert(foo.someProp) |
Das geht mit manchen Elementen gut, mit den Meisten (ärgerlich: <object> und <embed>) nicht. Plugin-Container verlieren so übrigens auch die Eigenschaften, die das Plugin hinzugefügt hat; VLC und Flash als bekannte Beispiele.
Also: aufpassen, was du verschiebst. Grunsätzlich haben meine VP aber recht.