JSFiddle - React, Tailwind, and code Playground

by Alexey Mishin

HTML

<div class="outer-box">
  <div class="box">For studying
    <div id="ball"></div>
  </div>
</div>

CSS

.outer-box {
  box-sizing: border-box;
  width: 500px;
  height: 500px;
  padding-top: 30px;
  
  background-color: #c6d3a7;
}

div.box {
  width: 260px;
  height: 220px;
  padding: 20px;
  padding-top: 60px;
  margin: 10px auto;
  background-color: lightgrey;
  text-align: center;
  
  border: 5px solid grey;
}

#ball {
  cursor: pointer;
  width: 3px;
  height: 3px;
  background-color: black;
  border: 30px solid #4a77bf;
}

JavaScript

var div = document.getElementsByClassName("box")[0];
var ball = document.getElementById('ball');

var ballSize = ball.getBoundingClientRect();
alert("Left one is " + ballSize.left + "\nTop is " + ballSize.top);

ball.onmousedown = function(e) {

  ball.style.position = 'absolute';
  moveAt(e);
  document.body.appendChild(ball);

  ball.style.zIndex = 1000;

  function moveAt(e) {
    ball.style.left = e.pageX - ball.offsetWidth / 2 + 'px';
    ball.style.top = e.pageY - ball.offsetHeight / 2 + 'px';
  }

  document.onmousemove = function(e) {
    moveAt(e);
  }

  ball.onmouseup = function() {
    document.onmousemove = null;
    ball.onmouseup = null;
  }
}