JSFiddle - React, Tailwind, and code Playground

HTML

<div  class="rect" ondrop="drop(event)" ondragover="allowDrop(event)">Qq</div>
<div id="draggable-element" class="rect" draggable="true" ondragstart="drag(event)" width="336" height="69"> qrQ3R3RF</div>

CSS

.rect {
  width: 100px;
  height: 100px;
  background: #FFCCFF;
  border: 1px solid black;
}

TypeScript

allowDrop = (ev) => {
  ev.preventDefault();
}

drag = (ev) => {
console.log(ev.target.id);
  ev.dataTransfer.setData("text", ev.target.id);
  ev.dataTransfer.setData("other", "stuff");
}

drop = (ev) => {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  var stuff = ev.dataTransfer.getData("other");
  console.log(stuff);
  ev.target.appendChild(document.getElementById(data));
}