Anton: inserBefore()

Moin!

Ich habe ein lauffähiges Skript zum Sortieren einer Liste, per Drag&Drop.

Wie der genau aussieht ist relativ wurst, da dieser funktioniert.

Das Problem ist, dass ich neuerdings Iframes(editable) in die Liste eingefügt habe. Nun modifiziert der Benutzer den Inhalt der Iframes und wenn er dann per Drag&Drop die Sortierung verändert, verschwindet der Inhalt des Iframes. Alles andere bleibt mit value ect. bestehen.

Grund dafür ist wohl, dass er wohl nur die iframe-Tags mitkopiert, jedoch nicht den Verweis auf die temporäre HTML-Datei. Meine Versuche, den innerHTML des Iframes im Nachinein wieder zu setzen, sind leider fehlgeschlagen.

swap : function(item1, item2) {
  var parent = item1.parentNode;

parent.removeChild(item1);
  parent.insertBefore(item1, item2);
}

item1 und item2 sind einfach 2 li-Objekt.

Hat jemand ne Idee, wie man die Sache retten kann?

  1. Hi,

    parent.removeChild(item1);
      parent.insertBefore(item1, item2);

    Denk mal drüber nach, was Du da machst.
    Du entfernst das item1 aus dem parent.
    Anschließend versuchst Du, vor dem (nicht mehr in parent enthaltenen, da gerade eben entfernten) item1 was einzufügen.

    cu,
    Andreas

    --
    Warum nennt sich Andreas hier MudGuard?
    Schreinerei Waechter
    O o ostern ...
    Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
    1. Hallo MudGuard.

      parent.removeChild(item1);
        parent.insertBefore(item1, item2);

      Denk mal drüber nach, was Du da machst.
      Du entfernst das item1 aus dem parent.
      Anschließend versuchst Du, vor dem (nicht mehr in parent enthaltenen, da gerade eben entfernten) item1 was einzufügen.

      Sicher? Ich meine dort zu erkennen, dass item1 entfernt und im Folgenden vor item2 item1 eingefügt wird.

      Einen schönen Mittwoch noch.

      Gruß, Ashura

      --
      sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
      „It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
      [HTML Design Constraints: Logical Markup]
      1. Hi,

        Sicher? Ich meine dort zu erkennen, dass item1 entfernt und im Folgenden vor item2 item1 eingefügt wird.

        Argh. Mist-Altenheimer ...

        Ich hatte doch tatsächlich die Reihenfolge der Parameter andersrum in Erinnerung ...

        cu,
        Andreas

        --
        Warum nennt sich Andreas hier MudGuard?
        Schreinerei Waechter
        O o ostern ...
        Fachfragen unaufgefordert per E-Mail halte ich für unverschämt und werde entsprechende E-Mails nicht beantworten. Für Fachfragen ist das Forum da.
        1. Hallo MudGuard.

          Ich hatte doch tatsächlich die Reihenfolge der Parameter andersrum in Erinnerung ...

          Ich muss auch ständig überlegen und ggf. nachschauen.

          Dabei ist es doch eigentlich leicht zu merken:

          obj.insertBefore(1, 2)
              ↳1    ↳2

          1 = what to insert
          2 = before what

          Mal sehen, ob ich mich selbst daran halten kann.

          Einen schönen Donnerstag noch.

          Gruß, Ashura

          --
          sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
          „It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
          [HTML Design Constraints: Logical Markup]
  2. Hallo,

    swap : function(item1, item2) {
      var parent = item1.parentNode;

    parent.removeChild(item1);
      parent.insertBefore(item1, item2);
    }

    item1 und item2 sind einfach 2 li-Objekt.

    Das Problem ist, dass ich neuerdings Iframes(editable) in die Liste eingefügt habe. Nun modifiziert der Benutzer den Inhalt der Iframes und wenn er dann per Drag&Drop die Sortierung verändert, verschwindet der Inhalt des Iframes. Alles andere bleibt mit value ect. bestehen.

    Grund dafür ist wohl, dass er wohl nur die iframe-Tags mitkopiert, jedoch nicht den Verweis auf die temporäre HTML-Datei.

    Ja, so ähnlich. [Node.insertBefore() fügt Core-DOM-Nodes in das Dokument ein. Es berücksichtigt dabei zwar  DocumentFragments, allerdings nur, indem es die childNodes mit berücksichtigt. chilNode Deines LI-Elements ist das HTMLIFrameElement, allerdings nicht dessen contentDocument und dessen childNodes.

    Meine Versuche, den innerHTML des Iframes im Nachinein wieder zu setzen, sind leider fehlgeschlagen.

    Ist das Dokument eines Frames dessen innerHTML? Nein, oder? Sonst müsste ja

    <iframe>
    <h1>Test</h1>
    <p>Test</p>
    </iframe>

    Eine Überschrift und einen Textabsatz im IFrame anzeigen.

    Du könntest versuchen, das contentDocument des IFrames anzusprechen. Das ist dann ein Document Objekt. Und dann dessen body-Node via myIFrame.contentDocument.body. Das sollte dann innerHTML haben.

    Beispiel:

      
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  
            "http://www.w3.org/TR/html4/strict.dtd">  
    <html>  
    <head>  
    <title>Titel</title>  
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">  
    <script type="text/javascript">  
    <!--  
    function handleIFrame() {  
     var myIFrame = document.body.firstChild;  
     //haben wir den IFRAME?  
     alert (myIFrame.tagName);  
     if (myIFrame.tagName == "IFRAME") {  
      //hat der IFRAME childNodes?  
      alert (myIFrame.childNodes.length);  
      //hat der IFRAME innerHTML?  
      alert (myIFrame.innerHTML);  
      //holen des IFrame Documents und des innerHTML aus dessen Body  
      if (myIFrame.contentDocument) { //DOM HTMLIFrameElement.contentDocument für DOM-Styndardkonforme Browser  
       var myIFrameDocument = myIFrame.contentDocument;  
       alert (myIFrameDocument.body.innerHTML);  
      } else if (myIFrame.contentWindow) { //Frame.contentWindow.document für den IE  
       var myIFrameDocument = myIFrame.contentWindow.document;  
       alert (myIFrameDocument.body.innerHTML);  
      }  
     }  
    }  
    //-->  
    </script>  
    </head>  
    <body><iframe src="Datentabelle.html" onload="handleIFrame();">  
    </iframe>  
      
    </body>  
    </html>  
    
    

    viele Grüße

    Axel