JSFiddle - React, Tailwind, and code Playground

by vijayweb

HTML

<!DOCTYPE HTML>
<html>
<head>
	<script>
	function allowDrop(ev) {
		ev.preventDefault();
	}

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

	function dragDrop(ev) {
		ev.preventDefault();
		var data = ev.dataTransfer.getData("text");
		ev.target.appendChild(document.getElementById(data));
	}
	</script>
	<style>
	.div1 {
		width: 240px;
		height: 75px;
		padding: 10px;
		border: 1px solid black;
		background-color: #F5F5F5;
	}
	
	p {
		font-size: 20px;
		font-weight: bold;
	}
	
	.gfg {
		font-size: 40px;
		color: #009900;
		font-weight: bold;
	}
	</style>
</head>

<body>
	<div class="gfg">GeeksforGeeks</div>
	
<p>Image Drag and Drop in boxes</p>


	<div class="div1"
		ondrop="dragDrop(event)"
		ondragover="allowDrop(event)">
	<img id="drag1"
		src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/Geek_logi_-low_res.png"
		draggable="true"
		ondragstart="dragStart(event)"
		width="220"
		height="70">
	</div>
	<br>
	<div class="div1"
		ondrop="dragDrop(event)"
		ondragover="allowDrop(event)">
	</div>
</body>
</html>