• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Reihenfolge von Objekten ändern

Status
Für weitere Antworten geschlossen.
M

moustache

Neues Mitglied
Hallo,
Gibt es eine Möglichkeit die Reihenfolge von Objekten (zb Div's oder Bilder) zu ändern?
Ich möchte auf meiner Webseite zum beispiel 5 Divs untereinander machen.
Beim Click auf einen Link im Div1 möchte ich, dass dieses an die 5. Stelle kommt. Beim Click auf einen Link im Div2 möchte ich, dass dieses an die 5. Stelle (also nun unter div1) kommt. Die anderen Divs sollten jeweilen nach oben nachrücken.
Wie bewerkstellige ich sowas am besten?
 
?

Könnte ich nicht den Index einfach erhöhen?

Hier habe ich ein Skript gefunden, das den Index der DIV's angibt.
Könnte ich nun nicht den Index einfach um einen Zähler erhöhen?
(oder noch besser; den Index auf den höchsten Wert aller Divs +1 setzen?)

Sorry, aber ich bin Java Script neuling... Vielen Dank für die Hilfe!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>

<script>
$(document).ready(function(){

$("div").click(function () {
// this is the dom element clicked
var index = $("div").index(this);
$("span").text("That was div index #" + index);
});

});
</script>
<style>
div { background:yellow; margin:5px; }
span { color:red; }
</style>
</head>
<body>
<span>Click a div!</span>
<div>First div</div>
<div>Second div</div>
<div>Third div</div>
</body>
</html>
 
Mal zur Erklärung was ein index ist. Es gibt die Möglichkeit in HTML Elemente absolut zu positionieren, was heisst, dass du x und y Koordinaten angeben kannst. Wenn sich beispielweise 2 bilder überlagern ist immer das zuletzt erstellte Bild vorne. Dies kannst du mit dem index verändern. Wenn du schon mal mit Photoshop oder gimp gearbeitet hast: index beschreibt die Reihenfolge der Ebenen wobei jedes Element eine eigene Ebene beschreibt :)

Für dein Problem wurde die Lösung schon genannt du entfernst das geklickte div komplett aus dem Körper und fügst es wieder ein. Es wird automatisch ganz unten eingefügt.

Eine Funktion für sowas könnte folgender maßen aussehen.

HTML: 
function placeElement(element, where) {
  element.parentNode.removeChild(element);
  where.appendChild(element);
}

// Ausführung wäre dann Folgende
placeElement(document.getElementById("div1"),document.getElementsByTagName("body")[0]);

Hoffe du kannst etwas mit der beschreibung anfangen. Wenn nicht schreib nochmal :)
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben