Ändern Sie die Reihenfolge der Elemente
Ich bin erstellen einer website von schwimmenden Breite. Die Benutzer verwenden die Bildschirme von full-HD-Auflösung, um einige 600px auf Smartphones scheint es eine ziemlich gute Idee. Dies bringt ein sehr Interessantes problem.
Wenn der Benutzer verwendet eine kleinere Auflösung als die optimale, die Seite wird sehr viel mehr Höhe. Dies bedeutet, es könnte nützlich sein, zu ändern, um einige Elemente (zum Beispiel ein Bild, das Suchfeld oder die navigation), um die Seite besser lesbar, ohne viel Bedarf an scrooling.
So, ich muss in der Lage sein, um Zugriff auf DOM-und Reihenfolge ändern, einige Elemente der Seite (tauschen).
Können sagen, ich habe eine Liste und müssen swap Punkt 1 und 2.
<ul>
<li>1</li>
<li>2</li>
</ul>
Fand ich eine Lösung auf Basis von Anhängen, die bereits Elemente Elemente <ul>
mithilfe der Funktion appendChild
. Allerdings gibt es ein problem mit der text-nodes und es wird wirklich kompliziert, es zu tun, für schwierigere element-Struktur, da die Notwendigkeit der Neuerstellung es wieder ganz.
Haben Sie Vorschläge, um es zu verbessern?
- Zeit zu investieren in das lernen von jQuery. Es macht diese Art von Aktivität viel einfacher.
- Media queries?.
- Können Sie, bitte, etwas konkreter? Ich jetzt, die Bibliothek, aber einige link zu API nützlich für diese wäre hilfreich.
- Haben Sie versucht, mit jquery sortierbar ? jqueryui.com/sortable
Du musst angemeldet sein, um einen Kommentar abzugeben.
Für diesen einfachen Fall (vertauschen der nur zwei Elemente), können Sie einfach
appendChild()
(fiddle)Demselben Knoten nicht existieren kann in mehreren Positionen; so, es ist entfernt von Ihrer aktuellen position und platziert am Ende der Sammlung.
Wenn Sie wollen mehr tun, komplizierte Sortierung, sollten Sie zum erstellen eines array aus der childNodes (yaf) und alle verrückt:
würde nicht tauschen innerHTML auch arbeiten?
2018 (und auch schon ein paar Jahre her) dies ist möglich mit CSS. Ihren Fall würde gelöst werden, indem so etwas wie dieses:
flex
funktioniert nicht / ist fehlerhaft fieldsets 🙁