Saving position of dragged element on Screen

Kristik47 · April 11, 2020

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.

Sign In

Saving position of dragged element on Screen

Recommended Posts

Kristik47

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members

Forums