JSFiddle - React, Tailwind, and code Playground

by Artem

HTML

<img draggable="true" src="https://pngimg.com/upload/small/basketball_PNG1096.png" width="100" alt="">

CSS

img {
  border: 1px solid #000;
  position: absolute;
}

JavaScript

'use strict';

const img = document.images[0];
let x, y;

img.ondragstart = function(e) {
	x = e.offsetX;
  y = e.offsetY;
};

img.ondrag = function(e) {
	img.style.left = e.clientX - x + 'px';
  img.style.top = e.clientY - y + 'px';
  //console.log(img.style.left);
  console.log(e);
};

img.ondragend = function(e) {
	//console.log(e);
	img.style.left = e.clientX - x + 'px';
  img.style.top = e.clientY - y + 'px';
};