JavaScript/DOM: Zwei Nodes tauschen (aber ohne Kopieren!)

Narses · Verfasst: Sa 10.07.10 13:37

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:

markieren

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

_________________
There are 10 types of people - those who understand binary and those who don´t.

Yogu · Verfasst: Sa 10.07.10 15:34

Moin Narses,

mit der Funktion insertBefore(movingNode, referenceNode) 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:

markieren

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 · Verfasst: Sa 10.07.10 15:35

Grad aus'm Kopf, weiß nicht, ob das so passt, sollte aber:

markieren

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 ;-)

_________________

Anyone who is capable of being elected president should on no account be allowed to do the job.
Ich code EdgeMonkey - In dubio pro Setting.

Martok · Verfasst: Sa 10.07.10 16:44

Wobei das zumindest in Firefox einen Bug hat: User Defined Properties gehen dabei verloren. Beispiel:

markieren

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.

_________________
"The phoenix's price isn't inevitable. It's not part of some deep balance built into the universe. It's just the parts of the game where you haven't figured out yet how to cheat."

Narses · Verfasst: So 11.07.10 01:07

Moin!

Jau, das tut´s:

markieren

Quelltext

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:

<table border=1>
  <tr id="id1">
    <td>test 1</td><td><input type="button" value="move1" onclick="moveit('id1');"></td>
  </tr>
  <tr id="id2">
    <td>test 2</td><td><input type="button" value="move2" onclick="moveit('id2');"></td>
  </tr>
  <tr id="id3">
    <td>test 3</td><td><input type="button" value="move3" onclick="moveit('id3');"></td>
  </tr>
</table>

<script type="text/javascript">

function moveit(id) {
  var node = document.getElementById(id);
  node.parentNode.insertBefore(node, node.previousSibling);
}

Dank euch allen! :beer:

cu
Narses

_________________
There are 10 types of people - those who understand binary and those who don´t.

	Mitgliederliste
	Gruppen
	Das Team
	Richtlinien
	Synonyme