JSFiddle - React, Tailwind, and code Playground

HTML

<div id="bla" draggable="true">

</div>

CSS

#bla{
  
  position: absolute;
  left: 100px;
  top: 100px;
  background-color: yellow;
  width: 100px;
  height: 100px;
  border: 1px solid silver;
}

JavaScript

var startX = null;
var startY = null;
var element = document.getElementById('bla');

element.addEventListener('dragstart', onDragStart, true);
element.addEventListener('dragend', onDragEnd, true);
element.addEventListener('drag', onDrag, true);
document.addEventListener('dragover', (e) => e.preventDefault(), true);
document.addEventListener('dragenter', (e) => e.preventDefault(), true);
document.addEventListener('dragexit', (e) => e.preventDefault(), true);
document.addEventListener('dragleave', (e) => e.preventDefault(), true);

function onDragStart(e){
        
  startX = e.screenX;
  startY = e.screenY;
  e.target.style.cursor = "move";
}

function onDrag(e){

	e.target.style.cursor = "move";
}

function onDragEnd(e){

	var style = document.defaultView.getComputedStyle(element);

  var newLeft = parseInt(style.left) + e.screenX - startX;
  var newTop = parseInt(style.top) + e.screenY - startY;
  
  e.target.style.left = newLeft + 'px';
  e.target.style.top = newTop + 'px';
  
  e.target.style.cursor = "default";
}