suntoucher: <li>-Reihenfolge in <ul> dynamisch verändern

Hallo zusammen!

Folgende DHTML-Problemstellung möchte ich mal zur Diskussion stellen: Die List Items <li> einer Unordered List <ul> sollen nachträglich dynamisch verschoben, also in ihrer Reihenfolge geändert werden.

<div id="list-container">
  <ul id="liste">
    <li id="li-01">Punkt 1</li>
    <li id="li-02">Punkt 2</li>
       <!-- weitere <li> -->
    <li id="li-98">Punkt 98</li>
    <li id="li-99">Punkt 99</li>
  </ul>
</div>

Die <li> werden von einer JavaScript-Funktion bereits dynamisch erzeugt und per `document.write()´ geschrieben.

Das Ganze soll auf einer fertig geladenen XHTML-Seite passieren und per JavaScript-Funktionsaufruf (moveUp(listItem)´, moveDown(listItem)´) natürlich beliebig oft ausführbar sein.

Mein Lösungsansatz ging in Richtung Zugriff auf die <li>-Elementknoten in der Annahme, dass man sie als Kindelemente der <ul> ansprechen können müsste. Also etwa document.getElementById("liste").childNodes[e].nodeName´ (e´ sei hier ein Elementschleifenzähler). Aber bereits das will einfach nicht gelingen bzw. liefert völlig unerwartete Resultate (z.B. friert Firefox ein)!

Kann mir vielleicht bitte jemand einen leichten Klapps auf den Hinterkopf geben? ;-)

Muchas gracias!

Suntoucher

  1. Hi,

    Kann mir vielleicht bitte jemand einen leichten Klapps auf den Hinterkopf geben? ;-)

    DOM kennt Methoden wie insertBefore() und Objekte wie previousSibling. Beachte zudem, dass zwischen den <li> noch Text-Nodes sind - außer im IE, versteht sich, der mal wieder alles anders machen muss. Du brauchst außerdem nicht irgend welche Kinder zu suchen, wenn Du dank der ID direkt auf das Element zugreifen kannst.

    Kleiner Hinweis am Rande: Wenn Du eine Reihenfolge spezifizierst, handelt es sich offenbar um eine Ordered List.

    Cheatah

    --
    X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
    X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
    X-Will-Answer-Email: No
    X-Please-Search-Archive-First: Absolutely Yes
    1. DOM kennt Methoden wie insertBefore() und Objekte wie previousSibling.

      ... die ich als Nächstes beaugapfeln werde, ja. Mir war der Zugriff selbst suspekt, aber durch die Denkanstöße von JürgenB. und wahsaga bin ich intellektuell (hoffentlich) wieder im Rennen ... ;-)

      Kleiner Hinweis am Rande: Wenn Du eine Reihenfolge spezifizierst, handelt es sich offenbar um eine Ordered List.

      Nö, da keine Reihenfolge im Sinn einer Sortierung oder Nummerierung benötigt wird, sondern nur die Veränderbarkeit der *Abfolge* der Listenelemente relevant ist. Es handelt sich konkret um eine Liste bestimmter Objekte, die der Benutzer in eine im genehme Abfolge bringen können soll, indem er einzelne Listenelemente per Mausklick markieren und anschließend aufwärts´ und abwärts´ in der Liste bewegen kann.

      Ich hätte sicher auch eine Tabelle oder einen `Stapel´ von <div>s nehmen können, aber ein <ul>/<li>-Konstrukt erschien mir irgendwie am Naheliegendsten.

      Danke,

      Suntoucher

      1. hi,

        Kleiner Hinweis am Rande: Wenn Du eine Reihenfolge spezifizierst, handelt es sich offenbar um eine Ordered List.

        Nö, da keine Reihenfolge im Sinn einer Sortierung oder Nummerierung benötigt wird, sondern nur die Veränderbarkeit der *Abfolge* der Listenelemente relevant ist.

        Wo machst du den Unterschied zwischen einer Sortierung und einer "Abfolge"?

        Es handelt sich konkret um eine Liste bestimmter Objekte, die der Benutzer in eine im genehme Abfolge bringen können soll, indem er einzelne Listenelemente per Mausklick markieren und anschließend aufwärts´ und abwärts´ in der Liste bewegen kann.

        Also soll er sie ordnen können, so wie er's für richtig hält.

        Ich hätte sicher auch eine Tabelle oder einen `Stapel´ von <div>s nehmen können,

        Gott bewahre, nein!

        aber ein <ul>/<li>-Konstrukt erschien mir irgendwie am Naheliegendsten.

        ul ist eine unordered list - also warum machst du keine ordered list daraus, wenn doch eine Ordnung hineingebracht werden soll?

        gruß,
        wahsaga

        --
        /voodoo.css:
        #GeorgeWBush { position:absolute; bottom:-6ft; }
        1. Wo machst du den Unterschied zwischen einer Sortierung und einer "Abfolge"?

          Hab jetzt gerade keine Lust im Lexikon nachzuschlagen, aber so ganz subjektiv würde ich sagen, dass die Reihenfolge einer Ordered List auf einer numerischen Sortierung beruht (deshalb sind die Biester ja meist irgendwie durchnummeriert; arabisch, römisch, alphabetisch -- whatever). Das wäre hier aber nicht hilfreich.

          Es handelt sich konkret um eine Liste bestimmter Objekte, die der Benutzer in eine im genehme Abfolge bringen können soll, indem er einzelne Listenelemente per Mausklick markieren und anschließend aufwärts´ und abwärts´ in der Liste bewegen kann.

          Also soll er sie ordnen können, so wie er's für richtig hält.

          Genau! Wie *er* es für richtig hält -- und nicht das lateinische, griechische, hebräische Alphabet oder die Menge der Natürlichen Zahlen oder sonst irgendeine ordnende Instanz dieses Universums.

          Reine Handarbeit.

          Keine Nummerierung.

          Ich hätte sicher auch eine Tabelle oder einen `Stapel´ von <div>s nehmen können,

          Gott bewahre, nein!

          Hee -- war'n Scherz! :-D

          ul ist eine unordered list - also warum machst du keine ordered list daraus, wenn doch eine Ordnung hineingebracht werden soll?

          Hm, schau dir beispielsweise mal den Menüpunkt "Anpassen" irgendeiner Toolbar irgendeines Programmes deines Vertrauens an. Da gibt es meist links eine Liste *aller* Objekte (hier: Tool-Icons), daneben eine Liste der aktuell vom Benutzer ausgewählten Objekte (Tool-Icons), dazwischen in der Regel zwei Buttons (z.B. "<--" und "-->"), die den Austausch zwischen diesen beiden Listen erlauben und unter der rechten (Benutzerauswahl-)Liste zwei Buttons "auf" und "ab", die dem Benutzer erlauben, `seine´ Tool-Icons in die Lieblingsreihenfolge zu bringen.

          Once again: Keine Nummerierung notwendig!

          Sowasbauich!

          Wo also siehst du da einen Vorteil einer <ol> gegenüber einer <ul>, wenn's ja eigentlich nur auf die <li>s ankommt?

          Vielleicht fehlt mir ja nur die Erleuchtung? ;-)

          Suntoucher

          1. Tach,

            Hab jetzt gerade keine Lust im Lexikon nachzuschlagen, aber so ganz subjektiv würde ich sagen, dass die Reihenfolge einer Ordered List auf einer numerischen Sortierung beruht (deshalb sind die Biester ja meist irgendwie durchnummeriert; arabisch, römisch, alphabetisch -- whatever). Das wäre hier aber nicht hilfreich.

            geordnete Listen müssen nicht nummeriert sein, sonst würden sie nummerierte Listen heißen. Eine ungeordnete Liste sollte problemlos von einem Browser in einer beliebigen Reihenfolge (unabhängig der Reihenfolge im Quelltext) angezeigt werden können. Du darfst nicht die standardmäßige Anzeigeform mit dem Sinn des Elementes verwechseln. Schließlich soll ein h1-Element auch nicht den Sinn große fettgedruckte Schrift rüberbringen, sondern Überschrift erster Ordnung.

            Da gibt es meist links eine Liste *aller* Objekte (hier: Tool-Icons), daneben eine Liste der aktuell vom Benutzer ausgewählten Objekte (Tool-Icons),

            Diese Liste könnte man als ungeordnete Liste aufbauen, auch wenn eine Ordnung die Suche vermutlich vereinfacht.

            und unter der rechten (Benutzerauswahl-)Liste zwei Buttons "auf" und "ab", die dem Benutzer erlauben, `seine´ Tool-Icons in die Lieblingsreihenfolge zu bringen.

            Das ist eindeutig geordnet, in diesem Falle von links nach rechts, du sagst doch selber, dass die Reihenfolge von Belang ist.

            Wo also siehst du da einen Vorteil einer <ol> gegenüber einer <ul>, wenn's ja eigentlich nur auf die <li>s ankommt?

            Der Sinn des Elements <ul> ist es ungeordnete Mengen zu beherbergen (vielleicht wäre der Name set sinnvoller gewesen), der Sinn des Elements <ol> ist es geordnete Mengen zu enthalten.

            mfg
            Woodfighter

            1. Hi, Woodfighter!

              geordnete Listen müssen nicht nummeriert sein, sonst würden sie nummerierte Listen heißen. Eine ungeordnete Liste sollte problemlos von einem Browser in einer beliebigen Reihenfolge (unabhängig der Reihenfolge im Quelltext) angezeigt werden können. Du darfst nicht die standardmäßige Anzeigeform mit dem Sinn des Elementes verwechseln. Schließlich soll ein h1-Element auch nicht den Sinn große fettgedruckte Schrift rüberbringen, sondern Überschrift erster Ordnung.

              Dass man beide Listentypen mit CSS so formatieren kann, dass sie identisch dargestellt werden, ist mir völlig klar. Aber ich selbst habe dennoch den Unterschied bisher so verstanden, dass eine <ol> sich von einer <ul> primär durch die Nummerierung (besser: Nummerierbarkeit) ihrer Elemente unterscheidet. Und ich denke, auch der SelfHTML-Autor Stefan Münz versteht den Unterschied so: "<ol> leitet eine nummerierte Liste ein (ol = ordered list = nummerierte Liste)." (siehe http://de.selfhtml.org/html/text/listen.htm#nummeriert).

              Aber im Zusammenhang mit dem von mir beabsichtigten Zweck kann ich die Diskussion um <ul> oder <ol> erst recht nicht ganz nachvollziehen. Habe es ehrlich gesagt zuerst für Spitzfindigkeit gehalten -- aber vielleicht entgeht mir einfach der tiefere Sinn?

              Was *ist* denn also der konkrete Unterschied oder gar Vorteil einer <ol> im Vergleich zur verwendeten <ul> in dem von mir genannten Beispiel, wenn die Reihenfolge / Ordnung / Sortierung (wie man es auch immer nennen mag) ausschließlich im Auge des Betrachters liegt und eben *nicht* auf irgendwelchen algorithmisch definierbaren oder auch nur fassbaren Eigenschaften fußt?

              Der Sinn des Elements <ul> ist es ungeordnete Mengen zu beherbergen (vielleicht wäre der Name set sinnvoller gewesen), der Sinn des Elements <ol> ist es geordnete Mengen zu enthalten.

              Aha, langsam kommen wir der Sache näher, denke ich! Du sprichst einen eher filosofischen (von mir aus auch philosophischen) Aspekt, eine begriffliche Meta-Ebene, an: Du gehst davon aus, dass der User mit seiner ganz speziellen Auswahl und Anordnung der Icons eine Ordnungs-_Absicht_ hat und *deshalb* sollte die <ol> gegenüber der <ul> bevorzugt werden.

              Demnach würde also die (völlig willkürliche) Liste *aller* Icons auf der linken Seite eher als <ul> deine (eure) Zustimmung finden und die vom User explizit zusammengeklickte Liste *seiner* Icons rechts wäre eine <ol>. Richtig?

              Wenn ja, gebe ich dir -- auf der phil. Ebene -- Recht!

              Ansonsten würde ich sehr gern weiter mit dir (euch) darüber diskutieren. Off Topic, denn das ursprüngliche DHTML/DOM-Problem ist dank eurer Hilfe inzwischen so gut wie gelöst ... Ich muss es morgen nur noch fein-tunen. ;-)

              Schönen Abend allerseits!

              Suntoucher.

              1. Tach,

                Und ich denke, auch der SelfHTML-Autor Stefan Münz versteht den Unterschied so: "<ol> leitet eine nummerierte Liste ein (ol = ordered list = nummerierte Liste)." (siehe http://de.selfhtml.org/html/text/listen.htm#nummeriert).

                dann ist der Text an dieser Stelle schlecht und sollte in der nächsten Version geändert werden. Das W3C unterscheidet einfach nur, ob die Ordnung notwendig ist (Beispiel eines Rezepts) oder nicht (Beispiel der zugehörigen Zutatenliste).

                Aha, langsam kommen wir der Sache näher, denke ich! Du sprichst einen eher filosofischen (von mir aus auch philosophischen) Aspekt, eine begriffliche Meta-Ebene, an: Du gehst davon aus, dass der User mit seiner ganz speziellen Auswahl und Anordnung der Icons eine Ordnungs-_Absicht_ hat und *deshalb* sollte die <ol> gegenüber der <ul> bevorzugt werden.

                Das hat mit Philosophie nicht übermäßig viel zu tun, sondern mit dem eigentlichen Sinn von HTML dem semantische Markup.

                Demnach würde also die (völlig willkürliche) Liste *aller* Icons auf der linken Seite eher als <ul> deine (eure) Zustimmung finden und die vom User explizit zusammengeklickte Liste *seiner* Icons rechts wäre eine <ol>. Richtig?

                Würde ich so sehen, auf der linken Seite ist die Ordnung ja mehr oder weniger willkürlich, auf der rechten Seite wählt er eine bestimmte Reihenfolge aus, die er danach auch repräsentiert sehen möchte. Die ganze Aktion (das Auswählen der Schaltflächen) macht schließlich nur noch minimalen Sinn, wenn die Anzeige hinterher in anderer Reihenfolge erfolgen würde.

                Ansonsten würde ich sehr gern weiter mit dir (euch) darüber diskutieren. Off Topic, denn das ursprüngliche DHTML/DOM-Problem ist dank eurer Hilfe inzwischen so gut wie gelöst ... Ich muss es morgen nur noch fein-tunen. ;-)

                Das ist doch noch nicht Off-Topic, da können wir sicher noch nachlegen.

                mfg
                Woodfighter

                1. Morjen!

                  Das W3C unterscheidet einfach nur, ob die Ordnung notwendig ist (Beispiel eines Rezepts) oder nicht (Beispiel der zugehörigen Zutatenliste).

                  (...)

                  Das hat mit Philosophie nicht übermäßig viel zu tun, sondern mit dem eigentlichen Sinn von HTML dem semantische Markup.

                  D'accord, unter diesem Gesichtspunkt betrachtet, kann ich dir absolut beipflichten! Ich habe die Nachlässigkeit (den Fehler?) begangen, den semantischen Unterschied nicht weit genug zu berücksichtigen.

                  Interessanterweise stehe ich keineswegs allein da: die Antworten aller 5 Kollegen, die ich um eine ganz spontane Einschätzung der beiden Listentypen im Beispiel mit den Tool-Icons gebeten habe, war: "ungeordnet". Lediglich eine Kollegin hat nach einem Moment des Nachdenkens gesagt "Hm, mit den Auf-´/Ab´-Buttons wird ja nachträglich eine Ordnung hineingebracht. Also ist es eher so ein Zwischending, oder ...?"

                  Was nur zum Teil stimmt, denn die Ordnung wird ja bereits bei der Selektion der Objekte aus der linken, ungeordneten Liste erzeugt. Aber interessant ist das Ergebnis dennoch, finde ich.

                  (...)

                  Das ist doch noch nicht Off-Topic, da können wir sicher noch nachlegen.

                  Off-Topic bezüglich des ursprünglichen Problems, meinte ich.
                  Aber leg(t) mal ruhig nach ...! ;-)

                  Bis dann.

                  Suntoucher

                2. Hallo,

                  Und ich denke, auch der SelfHTML-Autor Stefan Münz versteht den Unterschied so: "<ol> leitet eine nummerierte Liste ein (ol = ordered list = nummerierte Liste)." (siehe http://de.selfhtml.org/html/text/listen.htm#nummeriert).

                  dann ist der Text an dieser Stelle schlecht und sollte in der nächsten Version geändert werden. Das W3C unterscheidet einfach nur, ob die Ordnung notwendig ist (Beispiel eines Rezepts) oder nicht (Beispiel der zugehörigen Zutatenliste).

                  Natürlich ist die Übertragung ordered → nummeriert auf den ersten Blick falsch und auch hohl. Übersetzt man den Begriff allerdings aus der W3C-Elfenbeinturmsprache (Credo: wir definieren mal ins Blaue hinein eine Theorie) in die Normalsprache und in die WWW-Realität, kommt eben das heraus. Von mir aus werden *solche* spitzfindigen Semantikdiskussionen sicher nicht in die SELFHTML-Dokumentation getragen, denn diese soll das HTML-Denkuniversum für Menschen zugänglich machen, die HTML als ein Werkzeug, nicht als ein Feld des theoretischen Nachdenkens sehen.

                  Das Thema »Hat eine Liste Ordnung, wenn ja, ist es eine ol« halte ich in der Realität für müßig. Meine Navigationslisten z.B. haben definitiv eine Ordnung. Wie viele andere Listen, die ich mit ul auszeichne, ebenfalls. Trotzdem will ich nicht, dass sie nummeriert werden - Nummerierung ist nun einmal die Standarddarstellung einer »ordered list«. Da denke ich vor allem an Screenreader-Benutzer, die sich 1., 2., 3. usw. anhören müssen, ohne dass es ihnen irgendeinen Sinn vermittelt. CSS hilft da gar nicht weiter. Außerdem: In dem Punkt semantisch auszuzeichnen und dann die gewünschte Darstellung in fast allen Fällen mit CSS komplett umzubiegen, weil zwar semantisch gesehen eine Ordnung vorliegt, praktisch gesehen aber keine Nummerierung gefordert ist, halte ich für arge Hirnwichserei. Um es mit Tims Worten zu sagen: »Und Vorteile? Außer sich im sonnigen Gefühl baden zu können, ›richtig‹ strukturiert zu haben, eigentlich keines.« Das ist der typische Fehler einer bestimmten Entartung der Semantikdebatte, der hoffentlich nicht in die SELFHTML-Dokumentation getragen wird.

                  Die Erkenntnis »du darfst nicht die standardmäßige Anzeigeform mit dem Sinn des Elementes verwechseln« ist daher so relevant wie die Antwort auf die Frage »wieviele Engel könnten auf einem Stecknadelkopf tanzen«, denn die standardmäßige Anzeigeform diktiert letztlich Regeln.

                  Mathias

                  1. Tach,

                    Die Erkenntnis »du darfst nicht die standardmäßige Anzeigeform mit dem Sinn des Elementes verwechseln« ist daher so relevant wie die Antwort auf die Frage »wieviele Engel könnten auf einem Stecknadelkopf tanzen«, denn die standardmäßige Anzeigeform diktiert letztlich Regeln.

                    ach, immer, wenn ich Theoretiker so richtig in Fahrt komme, kommt molily aus der Praxis angerannt und macht alles kaputt ;-).

                    mfg
                    Woodfighter

                    1. Hallo,

                      Die Erkenntnis »du darfst nicht die standardmäßige Anzeigeform mit dem Sinn des Elementes verwechseln« ist daher so relevant wie die Antwort auf die Frage »wieviele Engel könnten auf einem Stecknadelkopf tanzen«, denn die standardmäßige Anzeigeform diktiert letztlich Regeln.

                      ach, immer, wenn ich Theoretiker so richtig in Fahrt komme, kommt molily aus der Praxis angerannt und macht alles kaputt ;-).

                      Aber ich stimme dir doch in theoretischer Hinsicht vollkommen zu. ;) Grundsätzlich kann man ol nutzen, sobald eine Ordnung vorliegt, man sollte nur die praktischen Resultate im Kopf haben. Navigationslisten in Screenreadern ist so ein Punkt, wo man auf ul ausweichen kann, ohne dass die »weniger semantische« Auszeichnung praktische Probleme nach sich zöge.

                      Mathias

                      1. Tach,

                        Navigationslisten in Screenreadern ist so ein Punkt, wo man auf ul ausweichen kann, ohne dass die »weniger semantische« Auszeichnung praktische Probleme nach sich zöge.

                        naja, vielleicht können wir ja noch in diesem Jahrzehnt auf echte Navigationslisten umsteigen.

                        mfg
                        Woodfighter

                  2. Hallo.

                    Das Thema »Hat eine Liste Ordnung, wenn ja, ist es eine ol« halte ich in der Realität für müßig.

                    Offenbar besteht da bei einigen ja noch realer Klärungsbedarf.

                    Meine Navigationslisten z.B. haben definitiv eine Ordnung. Wie viele andere Listen, die ich mit ul auszeichne, ebenfalls. Trotzdem will ich nicht, dass sie nummeriert werden - Nummerierung ist nun einmal die Standarddarstellung einer »ordered list«. Da denke ich vor allem an Screenreader-Benutzer, die sich 1., 2., 3. usw. anhören müssen, ohne dass es ihnen irgendeinen Sinn vermittelt.

                    Es würde ihnen zumindest den Sinn vermitteln, dass die Reihenfolge nicht zufällig gewählt worden ist. Und weshalb eine offenbar in irgendeiner Form relevante Reihenfolge -- wäre sie irrelevant, wäre ja eine <ul> gerechtfertigt, und zwar ohne die seltsame Logik der vermeintlichen Standarddarstellung -- den Anwendern von Screenreadern verborgen bleiben sollte oder weshalb sie sich gar davon gepeinigt fühlen müssten, erläuterst du gar nicht.

                    CSS hilft da gar nicht weiter. Außerdem: In dem Punkt semantisch auszuzeichnen und dann die gewünschte Darstellung in fast allen Fällen mit CSS komplett umzubiegen, weil zwar semantisch gesehen eine Ordnung vorliegt, praktisch gesehen aber keine Nummerierung gefordert ist, halte ich für arge Hirnwichserei. Um es mit Tims Worten zu sagen: »Und Vorteile? Außer sich im sonnigen Gefühl baden zu können, ›richtig‹ strukturiert zu haben, eigentlich keines.«

                    Diese "Argumentation" könnte auch für den Verzicht auf die meisten anderen Formen semantischer Auszeichnung gelten, denn von den Programmen wirklich semantisch ausgewertet werden ja die wenigsten Elemente. Sich allerdings an diesem derzeitigen Defizit zu orientieren, ist sicher kurzsichtig.

                    Das ist der typische Fehler einer bestimmten Entartung der Semantikdebatte, der hoffentlich nicht in die SELFHTML-Dokumentation getragen wird.

                    Dann wird SelfHTML eben an Relevanz verlieren. Ich fände das schade, auch wenn ich es ja schon gewohnt war, beim Verweis auf die Dokumentation dahingehend vorzuwarnen.

                    Die Erkenntnis »du darfst nicht die standardmäßige Anzeigeform mit dem Sinn des Elementes verwechseln« ist daher so relevant wie die Antwort auf die Frage »wieviele Engel könnten auf einem Stecknadelkopf tanzen«, denn die standardmäßige Anzeigeform diktiert letztlich Regeln.

                    Eben, und der Standard lautet inzwischen CSS. -- Allerdings interessiert mich persönlich nicht so arg, wieviele Engel ...
                    MfG, at

      2. Hallo,

        Es handelt sich konkret um eine Liste bestimmter Objekte, die der Benutzer in eine im genehme Abfolge bringen können soll, indem er einzelne Listenelemente per Mausklick markieren und anschließend aufwärts´ und abwärts´ in der Liste bewegen kann.

        Aus Interesse: Nutzt du dazu http://tool-man.org/examples/sorting.html?

        Mathias

        1. Tach,

          Aus Interesse: Nutzt du dazu http://tool-man.org/examples/sorting.html?

          ist es ok, wenn ich jetzt laut "Boah, ey!" sage?

          mfg
          Woodfighter

          1. Hallo Jens.

            Aus Interesse: Nutzt du dazu http://tool-man.org/examples/sorting.html?

            ist es ok, wenn ich jetzt laut "Boah, ey!" sage?

            Natürlich. Es ist nun ein weiterer Eintrag in meinen Bookmarks.

            Einen schönen Mittwoch noch.

            Gruß, Ash*feel free*ura

            --
            Selfcode: sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:) fl:( ss:) ls:[ js:|
            30 Days to becoming an Opera8 Lover -- Fix dsl sbc yahoo com with User JavaScript
            Meine Browser: Opera 8.50 | Firefox 1.0.7 | Lynx 2.8.5 | Netscape 4.7 | IE 6.0
            Use OpenOffice.org
  2. hi,

    Folgende DHTML-Problemstellung möchte ich mal zur Diskussion stellen: Die List Items <li> einer Unordered List <ul> sollen nachträglich dynamisch verschoben, also in ihrer Reihenfolge geändert werden.

    http://aktuell.de.selfhtml.org/tippstricks/dhtml/tabellen-sortieren/ wäre ein simpler Ansatz.

    Mein Lösungsansatz ging in Richtung Zugriff auf die <li>-Elementknoten in der Annahme, dass man sie als Kindelemente der <ul> ansprechen können müsste. Also etwa document.getElementById("liste").childNodes[e].nodeName´ (e´ sei hier ein Elementschleifenzähler). Aber bereits das will einfach nicht gelingen bzw. liefert völlig unerwartete Resultate (z.B. friert Firefox ein)!

    Dann stimmt wohl etwas mit deinem Schleifenzähler nicht, oder mit der Abbruchbedingung.
    Besondere Obacht ist mit den White Spaces zwischen den Elementen geboten - manche Browser sehen darin eigene Kindelemente (Textknoten) der Liste, andere wieder nicht.

    Aber wenn du alle li unterhalb eines bestimmten ul haben willst, nimm einfach getElementsByTagName:

    {referenz_auf_dein_ul}.getElementsByTagName("li")

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }
    1. Jambo, wahsaga!

      http://aktuell.de.selfhtml.org/tippstricks/dhtml/tabellen-sortieren/ wäre ein simpler Ansatz.

      Ja, aber eher einer für eine Sortierroutine. Mir geht's nur um das Verschieben von <li>s innerhalb einer Liste. Das Verschieben wird benutzerseitig durch einzelne Mausklick auf Hoch´-/Runter´-Buttons initiiert.

      Dann stimmt wohl etwas mit deinem Schleifenzähler nicht, oder mit der Abbruchbedingung.

      Doch, die haben beide gestimmt -- aber offenbar hatte der Browser (oder Windows?) selbst ein Problem, denn nach dem Reboot hing der Feuerfuchs dann nicht mehr und ich hatte ca. 15 Minuten umsonst geflucht ...
      Shit happens! ;-)

      Besondere Obacht ist mit den White Spaces zwischen den Elementen geboten - manche Browser sehen darin eigene Kindelemente (Textknoten) der Liste, andere wieder nicht.

      Jau, danke! Habe ich auch so festgestellt.

      Aber wenn du alle li unterhalb eines bestimmten ul haben willst, nimm einfach getElementsByTagName:

      {referenz_auf_dein_ul}.getElementsByTagName("li")

      Das scheint mir der entscheidende Schritt in Richtung der Lösung -- er wurde schon zum zweiten Mal empfohlen!

      Besten Dank soweit!

      Suntoucher

  3. Hallo suntoucher,

    ... document.getElementById("liste").childNodes[e].nodeName

    der Zugriff über Childnodes ist unsicher, da in einigen Browsern auch Zeilenumbrüche als Knoten gezählt werden. Versuch mal

    document.getElementById("liste").document.getElementsByTagName("li")[e]

    Gruß, Jürgen

    1. Hallo Jürgen!

      der Zugriff über Childnodes ist unsicher, da in einigen Browsern auch Zeilenumbrüche als Knoten gezählt werden.

      Du hast Recht, inzwischen bin ich nach weiteren Experimenten ebenfalls darauf gestoßen.

      document.getElementById("liste").document.getElementsByTagName("li")[e]

      Das ist ein sehr viel versprechender Ansatz -- danke dir!

      Suntoucher