JSFiddle - React, Tailwind, and code Playground

by vaheed akhtar

HTML

<div class="desination" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br />
<img id="dragMe" src="https://i.picsum.photos/id/1038/3914/5863.jpg?hmac=SGtXryWDkn_eVQdA1NjYrikcsrIfcfS4SFYHo4lCpkQ" draggable="true" ondragstart="drag(event)" width="336" height="69">

<div class="dragText" id="dragMe2" draggable="true" ondragstart="drag(event)" width="336" height="100">DragM</div>

CSS

.dragText {
  font-size: 20px;
  color: darkcyan;
  cursor: pointer;
}
.desination {
  height: 100px;
  border: 2px solid blue;
}

JavaScript

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}