Auf Thema antworten 2026

Beitrag

<blockquote data-quote="Duddle" data-source="post: 2533507" data-attributes="member: 17775">Nicht notwendig.Ich habe mal ein Minimalbeispiel gebastelt, dass so ziemlich alles umsetzt. Entweder nutzt du das als Inspiration oder baust drumherum dein Zeug.schippo.php:[html]&lt;!DOCTYPE html&gt;&lt;html lang=&quot;en&quot;&gt;&lt;head&gt;&nbsp; &lt;meta charset=&quot;UTF-8&quot;&gt;&nbsp; &lt;title&gt;&lt;/title&gt;&nbsp; &lt;style type=&quot;text/css&quot;&gt;&nbsp;&nbsp; #kerzenbereich {&nbsp; &nbsp; border: 1px solid red;&nbsp; &nbsp; width:900px;&nbsp; &nbsp; height:900px;&nbsp; &nbsp; margin: 1em auto;&nbsp; &nbsp; position:relative;&nbsp;&nbsp; }&nbsp; &lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;script src=&quot;http://code.jquery.com/jquery-1.11.3.min.js&quot;&gt;&lt;/script&gt;&lt;script src=&quot;http://code.jquery.com/ui/1.11.4/jquery-ui.min.js&quot;&gt;&lt;/script&gt;&lt;script&gt;&nbsp; (function() {&nbsp; &nbsp;&nbsp; &#039;use strict&#039;;&nbsp;&nbsp; $(document).ready(function()&nbsp;&nbsp; {&nbsp; &nbsp; $(&quot;#verschieben&quot;).draggable({&nbsp; &nbsp;&nbsp; helper: &quot;clone&quot;,&nbsp; &nbsp;&nbsp; cursor: &quot;move&quot;,&nbsp; &nbsp;&nbsp; opacity: 0.7,&nbsp; &nbsp;&nbsp; containment: &quot;parent&quot;,&nbsp; &nbsp;&nbsp; scroll: false&nbsp; &nbsp; });&nbsp; &nbsp; $(&quot;#verschieben&quot;).bind(&#039;dragstop&#039;, function(event, ui) {&nbsp; &nbsp;&nbsp; $(this).after($(ui.helper).clone().draggable({&nbsp; &nbsp; &nbsp; helper: &quot;original&quot;,&nbsp; &nbsp; &nbsp; cursor: &quot;move&quot;,&nbsp; &nbsp; &nbsp; opacity: 0.7,&nbsp; &nbsp; &nbsp; containment: &quot;parent&quot;,&nbsp; &nbsp; &nbsp; scroll: false&nbsp; &nbsp;&nbsp; }).attr(&quot;id&quot;, &quot;neueKerze&quot;));&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; $(&quot;#verschieben&quot;).unbind(&#039;dragstop&#039;);&nbsp; &nbsp;&nbsp; var neueKerze = $(&quot;#neueKerze&quot;);&nbsp; &nbsp;&nbsp; neueKerze.append(&#039;&lt;a id=&quot;speicherlink&quot; href=&quot;#&quot;&gt;speichern&lt;/a&gt;&#039;);&nbsp; &nbsp;&nbsp; $(&quot;#speicherlink&quot;).bind(&quot;click&quot;, function() {&nbsp; &nbsp; &nbsp; $.post( &quot;kerzenverwaltung.php&quot;, { x: neueKerze.position().left, y: neueKerze.position().top } );&nbsp; &nbsp; &nbsp; $(this).remove();&nbsp; &nbsp; &nbsp; neueKerze.draggable(&#039;disable&#039;);&nbsp; &nbsp; &nbsp; return false;&nbsp; &nbsp;&nbsp; });&nbsp; &nbsp; });&nbsp;&nbsp; });&nbsp; })();&lt;/script&gt;&lt;div id=&quot;kerzenbereich&quot;&gt;&nbsp; &lt;div class=&quot;ui-draggable ui-draggable-handle&quot; id=&quot;verschieben&quot;&gt;&lt;img src=&quot;http://www.4-wände.de/hpfixseparat_blumenkerze_2.gif&quot;&gt;&lt;/div&gt;&nbsp; &lt;?php include(&#039;kerzenverwaltung.php&#039;); ?&gt;&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;[/html]Wichtige Aspekte:<ul>
<li data-xf-list-type="ul">#kerzenbereich braucht eine CSS-Positionierung, in meinem Fall relative, damit die Kerzen dann gescheit absolut darin positioniert werden können</li>
<li data-xf-list-type="ul">dragstop löst folgende Schritte aus:<ul>
<li data-xf-list-type="ul">klont das Element und initialisiert es wie ein anderes Draggable und gibt ihm die ID neueKerze</li>
<li data-xf-list-type="ul">löst den dragstop-Eventhandler von der Ursprungskerze, damit nur eine Kerze gezogen werden kann</li>
<li data-xf-list-type="ul">hängt einen kleinen Speicher-Link an neueKerze</li>
<li data-xf-list-type="ul">bindet an diesen Link einen POST -Aufruf, entfernt den Link, deaktiviert das Draggable für neueKerze (ist somit &quot;fest&quot;)</li>
</ul></li>
<li data-xf-list-type="ul">in #kerzenbereich inkludiere ich direkt die kerzenverwaltung.php, die ohne POST nur die vorhandenen Positionen zurückgibt, siehe weiter unten</li>
</ul>kerzenverwaltung.php:[php]&lt;?php$dateiname = &quot;kerzenpositionen.txt&quot;;if(isset($_POST) &amp;&amp; isset($_POST[&#039;x&#039;]) &amp;&amp; isset($_POST[&#039;y&#039;])) {&nbsp; //speichern&nbsp; $x = (int)($_POST[&#039;x&#039;]);&nbsp; $y = (int)($_POST[&#039;y&#039;]);&nbsp; $daten = $x.&quot;;&quot;.$y.&quot;\n&quot;;&nbsp; $fh = fopen($dateiname, &quot;a&quot;);&nbsp; fwrite($fh, $daten);&nbsp; fclose($fh);} else {&nbsp; //auslesen&nbsp; $zeilen = file($dateiname,&nbsp; FILE_IGNORE_NEW_LINES);&nbsp; foreach($zeilen as $zeile) {&nbsp;&nbsp; $zeile = explode(&quot;;&quot;, $zeile);&nbsp;&nbsp; $x = $zeile[0];&nbsp;&nbsp; $y = $zeile[1];&nbsp;&nbsp; echo &#039;&lt;div style=&quot;position: absolute; left: &#039;.$x.&#039;px; top: &#039;.$y.&#039;px;&quot;&gt;&#039;;&nbsp;&nbsp; echo &#039;&lt;img src=&quot;http://www.4-wände.de/hpfixseparat_blumenkerze_2.gif&quot; style=&quot;width: 68px; height: 180px;&quot;&gt;&#039;;&nbsp;&nbsp; echo &#039;&lt;/div&gt;&#039;;&nbsp; }}?&gt;[/php]Zuerst wird unterschieden, ob ein POST ankommt. Im Speichern-Fall werden die beiden Werte einfach als Zeile in eine Datei geschrieben. Im Auslesen-Fall wird diese Datei zeilenweise ausgelesen und das entsprechende HTML erzeugt.kerzenpositionen.txt ist nichts sehenswertes. Es enthält dann sowas wie [code]465;99249;97102;14384;172[/code]Was hier fehlt ist eine Fehlerbehandlung (nur minimalst vorhanden) und ein paar deiner Finessen (wie das :hover bei den Kerzen), aber die kannst du wahrscheinlich selbst ergänzen.Falls du Fragen zum Code hast oder deine Erweiterungs-/Implementationsversuche scheitern, sag Bescheid.Duddle</blockquote>

[QUOTE="Duddle, post: 2533507, member: 17775"] Nicht notwendig. Ich habe mal ein Minimalbeispiel gebastelt, dass so ziemlich alles umsetzt. Entweder nutzt du das als Inspiration oder baust drumherum dein Zeug. schippo.php: [html] <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #kerzenbereich { border: 1px solid red; width:900px; height:900px; margin: 1em auto; position:relative; } </style> </head> <body> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script> <script> (function() { 'use strict'; $(document).ready(function() { $("#verschieben").draggable({ helper: "clone", cursor: "move", opacity: 0.7, containment: "parent", scroll: false }); $("#verschieben").bind('dragstop', function(event, ui) { $(this).after($(ui.helper).clone().draggable({ helper: "original", cursor: "move", opacity: 0.7, containment: "parent", scroll: false }).attr("id", "neueKerze")); $("#verschieben").unbind('dragstop'); var neueKerze = $("#neueKerze"); neueKerze.append('<a id="speicherlink" href="#">speichern</a>'); $("#speicherlink").bind("click", function() { $.post( "kerzenverwaltung.php", { x: neueKerze.position().left, y: neueKerze.position().top } ); $(this).remove(); neueKerze.draggable('disable'); return false; }); }); }); })(); </script> <div id="kerzenbereich"> <div class="ui-draggable ui-draggable-handle" id="verschieben"><img src="http://www.4-wände.de/hpfixseparat_blumenkerze_2.gif"></div> <?php include('kerzenverwaltung.php'); ?> </div> </body> </html> [/html] Wichtige Aspekte: [LIST] [*]#kerzenbereich braucht eine CSS-Positionierung, in meinem Fall [I]relative[/I], damit die Kerzen dann gescheit absolut darin positioniert werden können [*]dragstop löst folgende Schritte aus: [LIST] [*]klont das Element und initialisiert es wie ein anderes Draggable und gibt ihm die ID [I]neueKerze[/I] [*]löst den dragstop-Eventhandler von der Ursprungskerze, damit nur eine Kerze gezogen werden kann [*]hängt einen kleinen Speicher-Link an [I]neueKerze[/I] [*]bindet an diesen Link einen POST -Aufruf, entfernt den Link, deaktiviert das Draggable für [I]neueKerze [/I](ist somit "fest") [/LIST] [*]in #kerzenbereich inkludiere ich direkt die kerzenverwaltung.php, die ohne POST nur die vorhandenen Positionen zurückgibt, siehe weiter unten [/LIST] kerzenverwaltung.php: [php] <?php $dateiname = "kerzenpositionen.txt"; if(isset($_POST) && isset($_POST['x']) && isset($_POST['y'])) { //speichern $x = (int)($_POST['x']); $y = (int)($_POST['y']); $daten = $x.";".$y."\n"; $fh = fopen($dateiname, "a"); fwrite($fh, $daten); fclose($fh); } else { //auslesen $zeilen = file($dateiname, FILE_IGNORE_NEW_LINES); foreach($zeilen as $zeile) { $zeile = explode(";", $zeile); $x = $zeile[0]; $y = $zeile[1]; echo '<div style="position: absolute; left: '.$x.'px; top: '.$y.'px;">'; echo '<img src="http://www.4-wände.de/hpfixseparat_blumenkerze_2.gif" style="width: 68px; height: 180px;">'; echo '</div>'; } } ?> [/php] Zuerst wird unterschieden, ob ein POST ankommt. Im Speichern-Fall werden die beiden Werte einfach als Zeile in eine Datei geschrieben. Im Auslesen-Fall wird diese Datei zeilenweise ausgelesen und das entsprechende HTML erzeugt. kerzenpositionen.txt ist nichts sehenswertes. Es enthält dann sowas wie [code] 465;99 249;97 102;14 384;172 [/code] Was hier fehlt ist eine Fehlerbehandlung (nur minimalst vorhanden) und ein paar deiner Finessen (wie das :hover bei den Kerzen), aber die kannst du wahrscheinlich selbst ergänzen. Falls du Fragen zum Code hast oder deine Erweiterungs-/Implementationsversuche scheitern, sag Bescheid. Duddle [/QUOTE]

Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.

Authentifizierung

Wenn ▲ = 5, ▼ = 2 und ■ = 7, was ist ▲ × ▼ + ■?