Hallo,
ich würde gerne von einem Bild, welches man verschieben kann, die Position speichern (LocalStorage), damit es an dieser Stelle auch bei Neuladen der Seite bleibt.
Leider bekomme ich es einfach nicht hin..
Würde sich das Jemand mal anschauen?
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>store plane position</title>
<style type="text/css">
body {
padding:0;
margin:0;
overflow:hidden;
background-repeat: no-repeat;
background-size: cover;
}
#menue {
position: absolute;
left: 30vw;
top: 20vh;
}
#plane {position: absolute;
}
.dragme
{position: relative;}
</style>
<script type="text/javascript" language="JavaScript">
<!-- Begin
var ie=document.all;
var nn6=document.getElementById&&!document.all;
var verschieben=false;
var x,y;
var dobj;
function movemouse(e)
{
if (verschieben)
{
dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x;
dobj.style.top = nn6 ? ty + e.clientY - y : ty + event.clientY - y;
//localStorage.planeposition_left = e.clientX;
//localStorage.planeposition_top = e.clientY;
//document.getElementById("text").innerHTML = "Position: " + localStorage.planeposition_left + "-" + localStorage.planeposition_top + " ";
return false;
}
}
function selectmouse(e)
{
var fobj = nn6 ? e.target : event.srcElement;
var topelement = nn6 ? "HTML" : "BODY";
while (fobj.tagName != topelement && fobj.className != "dragme")
{
fobj = nn6 ? fobj.parentNode : fobj.parentElement;
}
if (fobj.className=="dragme")
{
verschieben = true;
dobj = fobj;
tx = parseInt(dobj.style.left+0);
ty = parseInt(dobj.style.top+0);
x = nn6 ? e.clientX : event.clientX;
y = nn6 ? e.clientY : event.clientY;
document.onmousemove=movemouse;
return false;
}
}
document.onmousedown=selectmouse;
document.onmouseup=new Function("verschieben=false");
// End -->
</script>
<script>
// Remove Button
function clickCounterRemove() {
localStorage.removeItem('planeposition_left');
localStorage.removeItem('planeposition_top');
localStorage.removeItem('xtext_clickcount');
}
</script>
<script>
// Plane position
function plane_updateplaneposition(){
if(typeof(Storage) !== "undefined") {
if (localStorage.planeposition_left) {
document.getElementById('plane').style.left = localStorage.planeposition_left;
} else {
document.getElementById('plane').style.left = "0";
localStorage.planeposition_left = document.getElementById("plane").style.left;
}
} else {
document.getElementById("text").innerHTML = "Sorry, your browser does not support web storage...";
}
if(typeof(Storage) !== "undefined") {
if (localStorage.planeposition_top) {
document.getElementById("plane").style.top = localStorage.planeposition_top;
} else {
document.getElementById('plane').style.top = "0";
localStorage.planeposition_top = document.getElementById("plane").style.top;
}
} else {
document.getElementById("text").innerHTML = "Sorry, your browser does not support web storage...";
}
document.getElementById("text").innerHTML = "Position: " + localStorage.planeposition_left + "/" + localStorage.planeposition_top + "";
}
</script>
</head>
<body>
<div id="menue">
<p><button onclick="clickCounterRemove()" type="button">remove storage planeposition</button> </p>
<div id="text"></div>
<p></p>
<p></p>
</div>
<div
class="dragme">
<img id="plane" src="http://img.time2draw.com/2014/06/Vehicles-Plane-step-by-final-step-215x382.png" border="0" alt=""/>
</div>
<script>
// On Load
if(typeof(Storage) !== "undefined") {
if (localStorage.xtext_clickcount) {
document.getElementById("text").innerHTML = "Position: " + localStorage.planeposition_left + "/" + localStorage.planeposition_top + "";
} else {
localStorage.xtext_clickcount = 0;
}
document.getElementById("text").innerHTML = "Position: " + localStorage.planeposition_left + "/" + localStorage.planeposition_top + "";
} else {
document.getElementById("text").innerHTML = "Sorry, your browser does not support web storage...";
}
plane_updateplaneposition();
</script>
</body>
</html>
Mir ist aufgefallen, wenn man das Flugzeug nur nach unten schiebt dann wird die Position nicht gespeichert. Woran könnte das liegen?
Vielen lieben Dank für die schnelle Hilfe :)! 