JSFiddle - React, Tailwind, and code Playground

by PratapDessai

HTML

<!DOCTYPE HTML>
<html>
<body>
<head>
<style>
#div1 {
  width: 350px;
  height: 70px;
  padding: 10px;
  border: 1px solid #aaaa;
}
</style>
</head>

<body>
<script>
	function allowDrop(ev) {
  	ev.preventDefault();
  }
  
  function drag(ev) {
  	ev.dataTransfer.setData("text", ev.target.id)
  }
  
  function drop(ev) {
  	ev.preventDefault();
    let data = ev.dataTransfer.getData("text");
    
    ev.target.appendChild(document.getElementById(data));
  
  }
</script>

<div id="div1" ondrop="drop(event)"
   ondragover="allowDrop(event)">
  </div>
  <br />
   <img id="drag1" src="https://www.w3schools.com/html/img_logo.gif" 
     draggable="true" ondragstart="drag(event)" width="336" height="69" >
  
</body>
</body>
</html>