stephanbogner/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Drag element</title>
  <style type="text/css">
    #container{
      position: absolute;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-color: #F3F4F6;
      display: flex;
      align-items: center;
    }

    #dragShape{
      position: relative;
      width: 272px;
      height: 205px;
      margin: auto;
      /*background-image: url(shape.svg);*/
      background-color: #fff;
      background-size: 100% 100%;
    }

    #draggable{
      cursor: move;
      border-radius: 999px;
      position: absolute;
      width: 26px;
      height: 26px;
      left: -13px;
      top: -13px;
      background: #FFFFFF;
      border: 2px solid #34D399;
      box-sizing: border-box;
      box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -2px rgba(0, 0, 0, 0.05);
    }
  </style>
</head>
<body>
  <div id="container">
    <div id="dragShape">
      <div id="draggable"></div>
    </div>
  </div>
</body>
</html>
<script type="text/javascript">
  const draggable = document.getElementById("draggable");
  const dragContainer = document.getElementById("dragShape");
  initDrag(draggable);

  function usePosition(x, y){
    const w = dragContainer.offsetWidth;
    const h = dragContainer.offsetHeight;
    const relativeX = x/w;
    const relativeY = y/h;
    console.log(relativeX, relativeY);
  }

  function initDrag(element) {
    // Adapted from https://www.w3schools.com/howto/howto_js_draggable.asp
    let dragStartMouseX = 0, dragStartMouseY = 0, diffX = 0, diffY = 0, positionX = 0, positionY = 0;
    element.onmousedown = dragStart;

    function dragStart(e) {
      e = e || window.event;
      e.preventDefault();

      dragStartMouseX = e.clientX;
      dragStartMouseY = e.clientY;
      document.onmouseup = dragStop;
      document.onmousemove = dragMove;
    }

    function dragMove(e) {
      e = e || window.event;
      e.preventDefault();

      let currentMouseX = e.clientX;
      let currentMouseY = e.clientY;

      diffX = dragStartMouseX - currentMouseX;
      diffY = dragStartMouseY - currentMouseY;

      let newX = positionX - diffX;
      let newY = positionY - diffY;

      element.style.transform = 'translate(' + newX + 'px,' + newY + 'px)'

      usePosition(newX, newY);
    }

    function dragStop() {
      positionX -= diffX;
      positionY -= diffY;
      document.onmouseup = null;
      document.onmousemove = null;
    }
  }
</script>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<title>Drag element</title>
	<style type="text/css">
	#container{
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: #F3F4F6;
	display: flex;
	align-items: center;
	}

	#dragShape{
	position: relative;
	width: 272px;
	height: 205px;
	margin: auto;
	/background-image: url(shape.svg);/
	background-color: #fff;
	background-size: 100% 100%;
	}

	#draggable{
	cursor: move;
	border-radius: 999px;
	position: absolute;
	width: 26px;
	height: 26px;
	left: -13px;
	top: -13px;
	background: #FFFFFF;
	border: 2px solid #34D399;
	box-sizing: border-box;
	box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -2px rgba(0, 0, 0, 0.05);
	}
	</style>
	</head>
	<body>
	<div id="container">
	<div id="dragShape">
	<div id="draggable"></div>
	</div>
	</div>
	</body>
	</html>
	<script type="text/javascript">
	const draggable = document.getElementById("draggable");
	const dragContainer = document.getElementById("dragShape");
	initDrag(draggable);

	function usePosition(x, y){
	const w = dragContainer.offsetWidth;
	const h = dragContainer.offsetHeight;
	const relativeX = x/w;
	const relativeY = y/h;
	console.log(relativeX, relativeY);
	}

	function initDrag(element) {
	// Adapted from https://www.w3schools.com/howto/howto_js_draggable.asp
	let dragStartMouseX = 0, dragStartMouseY = 0, diffX = 0, diffY = 0, positionX = 0, positionY = 0;
	element.onmousedown = dragStart;

	function dragStart(e) {
	e = e \|\| window.event;
	e.preventDefault();

	dragStartMouseX = e.clientX;
	dragStartMouseY = e.clientY;
	document.onmouseup = dragStop;
	document.onmousemove = dragMove;
	}

	function dragMove(e) {
	e = e \|\| window.event;
	e.preventDefault();

	let currentMouseX = e.clientX;
	let currentMouseY = e.clientY;

	diffX = dragStartMouseX - currentMouseX;
	diffY = dragStartMouseY - currentMouseY;

	let newX = positionX - diffX;
	let newY = positionY - diffY;

	element.style.transform = 'translate(' + newX + 'px,' + newY + 'px)'

	usePosition(newX, newY);
	}

	function dragStop() {
	positionX -= diffX;
	positionY -= diffY;
	document.onmouseup = null;
	document.onmousemove = null;
	}
	}
	</script>