JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <div id="draggable_element" draggable=true>  </div>
  </div>

CSS

body, html, div {
  margin: 0; padding: 0;
  background-color: grey;
  position: absolute;
  text-align: center;
}
#draggable_element {
  background-color: #f0fff0;
  width: 130px; height: 130px;
  left: 4cm; top: 4cm;
  border-style: solid;

JavaScript

const draggable_element = document.getElementById("draggable_element");

function int_list(dt, name) {
  for(const it of dt.items) {
    if (it.type.startsWith(`${name}`))  {
    	return it.type.split("_").slice(1).map(x=>parseInt(x));
    }
  }
}

draggable_element.addEventListener("dragstart", (e) => {
  const rect = e.srcElement.getBoundingClientRect();
  e.dataTransfer.setData(`pos_${Math.round(e.clientX - rect.x)}_${Math.round(e.clientY - rect.y)}`, '');
});

draggable_element.addEventListener("dragover", (e) => {
  const pos = int_list(e.dataTransfer, "pos");
  e.srcElement.style.left = `${e.x - pos[0]}px`;
  e.srcElement.style.top = `${e.y - pos[1]}px`;
});