Kristik47

Saving position of dragged element on Screen

Recommended Posts

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.