JSFiddle - React, Tailwind, and code Playground

by Andrey

HTML

<div>
  <img id='ball'  src="https://js.cx/clipart/ball.svg">
</div>

CSS

#ball{
  position: absolute;
}

JavaScript

var ball = document.getElementById('ball');

ball.ondragstart = function() {
  return false;
};

ball.onmousedown = function(e) { 

function getCoords(e) { 
      var box = e.getBoundingClientRect();

      return {
        top: box.top + pageYOffset,
        left: box.left + pageXOffset
      };
    }

var coords = getCoords(ball);
  var shiftX = e.pageX - coords.left;
  var shiftY = e.pageY - coords.top;

  ball.style.position = 'absolute';

  document.onmousemove = function(e) {
    ball.style.left = e.pageX - shiftX  + 'px';
    ball.style.top = e.pageY -  shiftY  + 'px';
  }
  
 ball.onmouseup = function() {
    document.onmousemove = null;
    ball.onmouseup = null;
  }
};