JSFiddle - React, Tailwind, and code Playground

HTML

<script>
  const onDrop = (e) => {
    e.preventDefault();
    e.target.appendChild(document.getElementById(e.dataTransfer.getData('target')));
  };
  const onDragOver = (e) => e.preventDefault();
  const onDragStart = (e) => e.dataTransfer.setData('target', e.target.id);

</script>
<p>
  Drag and drop the placeholder image into the box above it.
</p>
<div id="dest" ondrop="onDrop(event)" ondragover="onDragOver(event)" style="height: 200px; width: 200px; border: 1px solid #000; padding: 10px; box-sizing: border-box;"></div>
<br/>
<img id="source" draggable="true" ondragstart="onDragStart(event)" src="http://via.placeholder.com/180x180" />