Kristik47 0 Posted April 11 Hello friends, by now I am trying to write my mobile phone system. My mobile phone has the ability to move. Unfortunately, I cant save the position. Every time I "restart" my mobile phone, its position changes to the default one. The DIV I want to move(its empty) is div id ="mobile" The Drag Code begins at <script>. My save function is down below. <body style="overflow: hidden;"> <div id="container" > <div id="mobile"> <div id="mobileCam"></div> <div id="mobilePower"></div> <div id="mobileSound"></div> <div id="mobileSound2"></div> <div id="mobileContent"></div> <div id="mobileButton" onclick="HomeButton()"></div> </div> </div> <script> //Make the DIV element draggagle: dragElement(document.getElementById("mobile")); function dragElement(elmnt) { var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; if (document.getElementById(elmnt.id + "mobile")) { /* if present, the header is where you move the DIV from:*/ document.getElementById(elmnt.id + "mobile").onmousedown = dragMouseDown; } else { /* otherwise, move the DIV from anywhere inside the DIV:*/ elmnt.onmousedown = dragMouseDown; } function dragMouseDown(e) { e = e || window.event; e.preventDefault(); // get the mouse cursor position at startup: pos3 = e.clientX; pos4 = e.clientY; document.onmouseup = closeDragElement; // call a function whenever the cursor moves: document.onmousemove = elementDrag; } function elementDrag(e) { e = e || window.event; e.preventDefault(); // calculate the new cursor position: pos1 = pos3 - e.clientX; pos2 = pos4 - e.clientY; pos3 = e.clientX; pos4 = e.clientY; // set the element's new position: elmnt.style.top = (elmnt.offsetTop - pos2) + "px"; elmnt.style.left = (elmnt.offsetLeft - pos1) + "px"; } function closeDragElement() { /* stop moving when mouse button is released:*/ document.onmouseup = null; document.onmousemove = null; } function saveDragElement() { /* Speichert die Position des verschobenen Handys*/ } } </script> </body> Thats the css-Code of the "Div": body { #mobile { position: absolute; z-index: 9; width: 240px; height: 430px; background-color: grey; border-radius: 6px; } } I would be glad if someone could show me a tutorial or give the right answer and tips. Share this post Link to post Share on other sites
