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");

draggable_element.addEventListener("dragstart", (e) => {
  const rect = e.srcElement.getBoundingClientRect();
  const dt = e.dataTransfer;
  dt.setData("dx", `${Math.round(e.clientX - rect.x)}`);
  dt.setData("dy", `${Math.round(e.clientY - rect.y)}`);
  [...dt.items].forEach(it => {
    console.log(`dragstart ${it.type}: ${dt.getData(it.type)}`);
  });
});

draggable_element.addEventListener("dragover", (e) => {
  const dt = e.dataTransfer;
  [...dt.items].forEach(it => {
    console.log(`dragover ${it.type}: ${dt.getData(it.type)}`);
  });
});