Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 15 von 24
  1. #1
    joergi ist offline Eroberer
    registriert
    02-04-2012
    Beiträge
    50

    Bilder verschieben und neu positionieren

    Hi alle zusammen,

    ich versuche zur Zeit einen Script zu schreiben, der alle Bilder in einem Verzeichnis darstellt. Die einzelnen Bilder können dann verschoben werden. Leider sind meine Javascript Kenntnisse eher bescheiden. Daher kam ich auch nur bis zu diesem Ergebnis (siehe Quellcode unten).

    Folgende Punkte fehlen oder sind fehlerhaft:
    1. Die Positionierung der Bilder und der Formularfelder, ist nur im Firefox korrekt ausgerichtet.
    2. Das jeweils zu verschiebende Bild sollte den höchsten Z-Index haben
    3. Ein Bild kann nur verschoben werden, wenn man gleichzeitig auf dieses klickt und es zugleich bewegt. Es soll jedoch nur mit einem klick aufgenommen, dann bewegt werden können und mit einem erneuten Klick wieder geparkt werden können.
    4. Wird ein Bild an die Position eines anderen Bildes verschoben, sollen sich die Bilder ab dieser Position bis zur ehemaligen Position des verschobenen Bildes nach rechts verschieben.

    Könnt Ihr mir weiterhelfen? Ich wäre Euch wirklich dankbar, denn mir fällt einfach keine Lösung ein




    PHP-Code:
    <?php
    $dir
    ="test/";
    $color="9DCEFF";
    ?>
    <script type="text/javascript">
    //Das Objekt, das gerade bewegt wird.
    var dragobjekt = null;
    // Position, an der das Objekt angeklickt wurde.
    var dragx = 0;
    var dragy = 0;
    // Mausposition
    var posx = 0;
    var posy = 0;
    function draginit() {
     // Initialisierung der Überwachung der Events
      document.onmousemove = drag;
      document.onmouseup = dragstop;
    }
    function dragstart(element) {
       //Wird aufgerufen, wenn ein Objekt bewegt werden soll.

      dragobjekt = element;
      dragx = posx - dragobjekt.offsetLeft;
      dragy = posy - dragobjekt.offsetTop;
    }
    function dragstop() {
      //Wird aufgerufen, wenn ein Objekt nicht mehr bewegt werden soll.
      dragobjekt=null;
    }
    function drag(ereignis) {
      //Wird aufgerufen, wenn die Maus bewegt wird und bewegt bei Bedarf das Objekt.
      posx = document.all ? window.event.clientX : ereignis.pageX;
      posy = document.all ? window.event.clientY : ereignis.pageY;
      if(dragobjekt != null) {
        dragobjekt.style.left = (posx - dragx) + "px";
        dragobjekt.style.top = (posy - dragy) + "px";
      }
    }
    </script>
    </head>
    <body onload="draginit()">
     <div align="center">
                <table style="border-style: solid; border-width: 2px; padding-left: 4px; padding-right: 4px; padding-top: 1px; padding-bottom: 1px" bgcolor="#C6E2FF" border="0" bordercolor="#999999" cellpadding="0" cellspacing="0" width="1785">
                    <tr>
                        <td align="left">
                        <p align="center"><font color="#2543CF" size="6"><i>
                        (Verzeichnis "<?php echo substr($dir,0,-1);?>")</i></font> </p>
                        <br>
    <table border="0" cellspacing="3">
    <tr>
    <?php
    $d 
    dir($dir);
    while (
    false !== ($datei $d->read()))
    {
    if (
    $datei != "." and $datei != "..")
    {
    $inhalt[]=$datei;
    }
    }
    $d->close();
    sort ($inhalt);
    $a=0;
    $b=1;
    $anz=count($inhalt);
    while (
    $a<$anz)
    {
    $art2=130;
    $image getimagesize($dir.$inhalt[$a]);
    $breite_alt $image[0];
    $hoehe_alt $image[1];
    if (
    $hoehe_alt>$breite_alt || $hoehe_alt==$breite_alt)
    {
    $hoehe_neu=$art2;
    $breite_neu=($art2/$hoehe_alt)*$breite_alt;
    }
    if (
    $hoehe_alt<$breite_alt)
    {
    $breite_neu=$art2;
    $hoehe_neu=($art2/$breite_alt)*$hoehe_alt;
    }
    $p3=((190-$hoehe_neu)/2)-47;
    $p4=(292-$breite_neu)/2;
    $p5=$hoehe_neu+15;
    $p6=-((292-$breite_neu)/2)+15;
    $p7=$hoehe_neu-90;
    $p8=$breite_neu+20;
    echo 
    "<td style='position:relative;' width='290' height='190' bgcolor='#".$color."'>";
    echo 
    '<div onmousedown="dragstart(this)" style="position:relative;top:'.$p3.'px;left:'.$p4.'px; z-index:1;"><img src="'.$dir.$inhalt[$a].'" width="'.$breite_neu.'" height="'.$hoehe_neu.'">';
    echo 
    '<div style="position:absolute;top:'.$p5.'px;left:'.$p6.'px;"><input type="text" name="text'.$a.'" value="'.$inhalt[$a].'" size="40"></div>';
    echo 
    '<strong style="position:absolute;top:'.$p7.'px;left:'.$p8.'px;"><input type="text" name="art'.$a.'" value="'.$a.'" size="1"></strong>';
    echo 
    "</div>";
    if (
    $b==6)
    {
    $b=0;
    echo 
    "</tr><tr>";
    }
    $a++;
    $b++;
    }
    ?>
    </tr>
    </table>
    </table>
    </div>
    </body>

  2. #2
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.757

    AW: Bilder verschieben und neu positionieren

    PHP-Code bei einem JS-Problem zu geben ist nicht sehr hilfreich. Gib' uns einen Testlink oder den Code, der im Browser ankommt.

  3. #3
    joergi ist offline Eroberer
    registriert
    02-04-2012
    Beiträge
    50

    AW: Bilder verschieben und neu positionieren

    Sorry,

    wollte nur die Wirkungsweise des Scriptes zeigen. Aber untenstehend, findet Ihr den fertigen Script. Das Beispiel arbeitet mit vier Bildern, die verschoben werden können. Die Problematik, habe ich ja schon in meinem ersten Posting beschrieben


    HTML-Code:
    <script type="text/javascript">
    //Das Objekt, das gerade bewegt wird.
    var dragobjekt = null;
    // Position, an der das Objekt angeklickt wurde.
    var dragx = 0;
    var dragy = 0;
    // Mausposition
    var posx = 0;
    var posy = 0;
    function draginit() {
     // Initialisierung der Überwachung der Events
      document.onmousemove = drag;
      document.onmouseup = dragstop;
    }
    function dragstart(element) {
       //Wird aufgerufen, wenn ein Objekt bewegt werden soll.
    
      dragobjekt = element;
      dragx = posx - dragobjekt.offsetLeft;
      dragy = posy - dragobjekt.offsetTop;
    }
    function dragstop() {
      //Wird aufgerufen, wenn ein Objekt nicht mehr bewegt werden soll.
      dragobjekt=null;
    }
    function drag(ereignis) {
      //Wird aufgerufen, wenn die Maus bewegt wird und bewegt bei Bedarf das Objekt.
      posx = document.all ? window.event.clientX : ereignis.pageX;
      posy = document.all ? window.event.clientY : ereignis.pageY;
      if(dragobjekt != null) {
        dragobjekt.style.left = (posx - dragx) + "px";
        dragobjekt.style.top = (posy - dragy) + "px";
      }
    }
    </script>
    </head>
    <body onload="draginit()">
     <div align="center">
    			<table style="border-style: solid; border-width: 2px; padding-left: 4px; padding-right: 4px; padding-top: 1px; padding-bottom: 1px" bgcolor="#C6E2FF" border="0" bordercolor="#999999" cellpadding="0" cellspacing="0" width="1785">
    				<tr>
    					<td align="left">
    					<p align="center"><font color="#2543CF" size="6"><i>Editor
    					(Verzeichnis "test")</i></font> </p>
    					<br>
    <table border="0" cellspacing="3">
    <tr>
    <td style='position:relative;' width='290' height='190' bgcolor='#9DCEFF'>
    <div onmousedown="dragstart(this)" style="position:relative;top:-17px;left:85.654947916667px; z-index:1;">
    <img src="test/bild1.jpg" width="120.69010416667" height="130">
    <div style="position:absolute;top:145px;left:-70.654947916667px;">
    <input type="text" name="text0" value="bild1.jpg" size="40"></div>
    <strong style="position:absolute;top:40px;left:140.69010416667px;">
    <input type="text" name="art0" value="0" size="1"></strong></div>
    <td style='position:relative;' width='290' height='190' bgcolor='#9DCEFF'>
    <div onmousedown="dragstart(this)" style="position:relative;top:-0.75px;left:81px; z-index:1;">
    <img src="test/bild2.jpg" width="130" height="97.5">
    <div style="position:absolute;top:112.5px;left:-66px;">
    <input type="text" name="text1" value="bild2.jpg" size="40">
    </div><strong style="position:absolute;top:7.5px;left:150px;">
    <input type="text" name="art1" value="1" size="1"></strong></div>
    <td style='position:relative;' width='290' height='190' bgcolor='#9DCEFF'>
    <div onmousedown="dragstart(this)" style="position:relative;top:-0.75px;left:81px; z-index:1;">
    <img src="test/bild3.jpg" width="130" height="97.5">
    <div style="position:absolute;top:112.5px;left:-66px;">
    <input type="text" name="text2" value="bild3.jpg" size="40"></div>
    <strong style="position:absolute;top:7.5px;left:150px;">
    <input type="text" name="art2" value="2" size="1"></strong></div>
    <td style='position:relative;' width='290' height='190' bgcolor='#9DCEFF'>
    <div onmousedown="dragstart(this)" style="position:relative;top:-0.75px;left:81px; z-index:1;">
    <img src="test/bild4.jpg" width="130" height="97.5"><div style="position:absolute;top:112.5px;left:-66px;">
    <input type="text" name="text3" value="bild4.jpg" size="40"></div>
    <strong style="position:absolute;top:7.5px;left:150px;">
    <input type="text" name="art3" value="3" size="1"></strong></div></tr>
    </table>
    </table>
    </div>
    </body>

  4. #4
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.757

    AW: Bilder verschieben und neu positionieren

    1. Dein HTML ist extrem invalide - das kann die verschiedenen Positionierungen/Formatierungen erklären. Benutze eine gescheide DocType, damit der IE nicht in den Quirksmode geht.
    2. Da sind in deinem Skript einige globale Variablen, die unnötig sind (das Ganze kann man auch komplett ohne globale Variablen lösen)... und globale Variablen sind immer schlecht.
    3. Den z-index kannst du doch in dragstart auf was hohes setzen und in dragstop wieder zurücksetzen.
    4. Damit das D'n'D gescheit funktioniert, musst du die Standardaktion des Browsers mit return false oder ev.preventDefault() verhindern.
    5. Damit die Elemente die Plätze tauschen, musst du nicht nur die Position der Elemente verändern, sondern auch die Position im DOM (hab' mal was ähnliches hier gemacht).

    PS: Du solltest dich dringend mit der Trennung von Markup, Style und Funktionalität beschäftigen.

  5. #5
    joergi ist offline Eroberer
    registriert
    02-04-2012
    Beiträge
    50

    AW: Bilder verschieben und neu positionieren

    Hi kkapsner,

    danke für die Antwort. Hmm, bin in Sachen Javascript wirklich ein blutiger Anfänger. Habe bisher alles in PHP programmiert. Die DND Routine habe ich im Internet gefunden. Werde mich doch wohl oder übel stärker mit dem Thema beschäftigen müssen ....

    Aber vielleicht kannst Du mir ja beim Layout helfen. In jedem Browser ist die Positionierung anders. Auch der Einbau des Doctypes

    HTML-Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
    brachte überhaupt keine Änderung.

    Evtl. ist die Verwendung von Variablen doch nötig, denn ich möchte zu einem späteren Zeitpunkt die neu sortieren Bilder in der neuen Reihenfolge speichern (z.B. 1.jpg, 2.jpg usw.). Das dürfte dann wohl nur mit PHP gehen, oder !!!

  6. #6
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.757

    AW: Bilder verschieben und neu positionieren

    Kannst du mal einen Testlink machen, damit ich mir das mal live ansehen kann?

    Bilder auf dem Server speichern kannst du natürlich nur mit einer serverseitigen Sprache - z.B. PHP.

  7. #7
    joergi ist offline Eroberer
    registriert
    02-04-2012
    Beiträge
    50

    AW: Bilder verschieben und neu positionieren

    Hi kkapsner,

    unter http://www.immobilien-nieswand.de/test.php habe ich mal eine Demo eingerichtet

  8. #8
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.757

    AW: Bilder verschieben und neu positionieren

    OK - da kann ich verstehen, dass die Browser das unterschiedlich anzeigen... der HTML-Code ist extrem invalide (http://validator.w3.org/check?uri=ht...Inline&group=0)! Räum' da mal auf (z.B. gehört die DocType ganz an den Anfang).

  9. #9
    joergi ist offline Eroberer
    registriert
    02-04-2012
    Beiträge
    50

    AW: Bilder verschieben und neu positionieren

    Hi kkapsner,

    wirklich blöder Fehler. Habe jetzt das Doc type an den Anfang gesetzt. Die restlichen Fehler werde ich auch noch beseitigen. Die Darstellung funktioniert jetzt bei allen Browsern. Nur bei manchen sind die Grafik inkl. Felder etwas versetzt. Aber das ist nicht schlimm. Kannst Du einem JS Neuling sagen, ob er das Problem lösen kann bzw. ihm einige Tips geben? Bin wirklich am verzweifeln. Dein Beispiel auf Deiner Homepage ist ja sehr schön aber für mich zu kompliziert zum verstehen

  10. #10
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.757

    AW: Bilder verschieben und neu positionieren

    Für einen kompletten Neuling ist das Problem schon etwas schwieriger, aber mit etwas Einsatz sollte das auch machbar sein.

    Als aller erstes musst du die Default-Aktion des Browsers beim Ziehen verhindern. Dazu musst du entweder im onmousedown am Ende ein
    Code:
    return false;
    einbauen, oder der Funktion dragstart noch das Event-Objekt mitgeben und dann dort .preventDefault() (bzw. für ältere IEs .returnValue = false; ) ausführen.

  11. #11
    joergi ist offline Eroberer
    registriert
    02-04-2012
    Beiträge
    50

    AW: Bilder verschieben und neu positionieren

    Hi kkapsner,

    Danke für den Tip . Habe mich für die erste Version entschieden. Die Zeile heißt nun z.B.

    HTML-Code:
    <div onmousedown="dragstart(this); return false;" style="position:relative;top:-0.75px;left:81px; z-index:1;">
    Das nächste Frage wäre, wie das zu verschiebene Bild den höchsten zindex bekommt. Den Z-index im Style Befehl zu setzen, bringt natürlich nichts. Aber wie setze ich den im Javascript? habe es schon mit meinen bescheidenen Fähigkeiten mittels "document.all.zindex=1000;" oder "window.event.zindex=1000;" probiert. Aber das dürfte wohl komplett falsch sein!

    Ist es eigentlich möglich, die jeweils aktuelle Reihenfolge der Bilder stetig in einem Formularfeld anzuzeigen, also z.B. Bild01.jpg Bild07.jpg Bild03.jpg? Wednn ja, könnte PHP beim speichern auf dieses Formularfeld zugreifen

  12. #12
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.757

    AW: Bilder verschieben und neu positionieren

    In dragstart übergibst du doch das Element als Parameter - dann kannst du dort auch den z-index des Elementes ändern (http://de.selfhtml.org/javascript/ob..._eigenschaften).
    Woher hattest du denn die Ansätze, die du da ausprobiert hast?

    Die Reihenfolge kann man schon in einem Formularfeld anzeigen/speichern und dann zu PHP übertragen. Aber ich würde schön eines nach dem Anderen angehen.

  13. #13
    joergi ist offline Eroberer
    registriert
    02-04-2012
    Beiträge
    50

    AW: Bilder verschieben und neu positionieren

    Jau super. Mußte zwar viel überlegen und probieren aber es funktioniert jetzt. Das jeweilige Bild, erhält beim verschieben jetzt automatisch den höchsten z-index (habe einfach mal 10000 genommen)

    Der Absatz mit dem jetzt eingefügten zindex Befehl lautet jetzt:

    HTML-Code:
      dragobjekt = element;
      dragobjekt.style.zIndex = 10000;
      dragx = posx - dragobjekt.offsetLeft;
      dragy = posy - dragobjekt.offsetTop;
    So langsam nimmt das Script schon seine Formen an. Kanst Du mir einen Tip geben, wie man ein bewegtes Objekt zwischen zwei anderen Objekten schieben kann und alle Objekte rechts davon entsprechend bis zur Lücke aufrücken, so das es wieder eine durchgehende Bildreihenfolge wird?

    PS: Die Ansätze waren eine oberflächliche Überlegung. Ich hatte mich vor mehreren Jahren mal mit JS beschäftigt. Aber dann nur noch mit PHP

  14. #14
    joergi ist offline Eroberer
    registriert
    02-04-2012
    Beiträge
    50

    AW: Bilder verschieben und neu positionieren

    Ups, kleiner Nachtrag:

    1. Durch das "return false" Kommando, können die Formularfelder nicht mehr ausgefüllt werden.

    2. Bewegt man ein Objekt durch ein Objekt, welches schon bewegt wurde und das einen höheren z-index hatte, wird das zu verschiebende Bild unten diesem bewegt und nicht darüber

  15. #15
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.757

    AW: Bilder verschieben und neu positionieren

    Zu 1.: das hatte ich übersehen... es gibt da jetzt zwei Möglichkeiten: entweder du überprüfst, ob du mit der Maus gerade in ein <input> geklickt hast (über das event-Object mittels .target bzw. .srcElement) und wenn du in einem bist, machst du nicht die ganze DnD Sache. Oder du definierst dir einen Bereich, über den man dann das <div> verschieben kann, und nicht mehr über das komplette <div>.

    Zu 2.: das hatte ich in #4 3. schon angesprochen: in dragstop den zIndex einfach wieder zurücksetzen.

    Das mit dem Verschieben wird bei deiner HTML-Struktur schwierig, da die Bilder in einer Tabelle angeordnet sind: wenn du ein Bild von einer Zeile in die andere wechselst, musst du dich um die Änderung des "Reihensprungs" per Hand kümmern. Lästig und unnötig: pack' die <div>s nicht in eine Tabelle, sondern einfach hintereinander - die tabellenartige Darstellung kannst du dann über float einstellen (hat auch noch den Vorteil, dass man bei einem Bildschirm, der nicht breit genug für deine Tabelle ist, nicht mehr nach links scrollen muss).

Seite 1 von 2 12 LetzteLetzte

Ähnliche Themen

  1. Bilder verschieben performance IE
    Von AndyF im Forum JavaScript
    Antworten: 12
    Letzter Beitrag: 12-01-2010, 18:47
  2. Bilder verschieben
    Von kkapsner im Forum JavaScript
    Antworten: 1
    Letzter Beitrag: 04-04-2008, 13:11
  3. Bilder Positionieren?
    Von trend91 im Forum JavaScript
    Antworten: 9
    Letzter Beitrag: 14-12-2007, 20:19
  4. Bilder Positionieren
    Von alexalexxx im Forum JavaScript
    Antworten: 5
    Letzter Beitrag: 09-08-2007, 20:16
  5. Antworten: 13
    Letzter Beitrag: 23-03-2004, 06:53

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •