Posting-Frequenz: 14µHz
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>- #kerzenbereich braucht eine CSS-Positionierung, in meinem Fall relative, damit die Kerzen dann gescheit absolut darin positioniert werden können
- dragstop löst folgende Schritte aus:
- klont das Element und initialisiert es wie ein anderes Draggable und gibt ihm die ID neueKerze
- löst den dragstop-Eventhandler von der Ursprungskerze, damit nur eine Kerze gezogen werden kann
- hängt einen kleinen Speicher-Link an neueKerze
- bindet an diesen Link einen POST -Aufruf, entfernt den Link, deaktiviert das Draggable für neueKerze (ist somit "fest")
- in #kerzenbereich inkludiere ich direkt die kerzenverwaltung.php, die ohne POST nur die vorhandenen Positionen zurückgibt, siehe weiter unten
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>';
}
}
?>kerzenpositionen.txt ist nichts sehenswertes. Es enthält dann sowas wie
Code:
465;99
249;97
102;14
384;172Was 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
