JSFiddle - React, Tailwind, and code Playground

by Marco

HTML

<div>
    <img class="dr" id="a" src="http://placekitten.com/128/128">
    <img class="dr" id="b" src="http://placekitten.com/130/130">
</div>

<div id="dropArea"></div>

CSS

*{margin:0px;padding:0px;}
.dr{border:2px solid black;}


#dropArea{
	background-color: #09F;	
	height: 650px;
	width: 650px;
	position:absolute;
	top:0px;
	right:0px;
}

JavaScript

$('.dr').on("dragstart", function (event) {
			  var dt = event.originalEvent.dataTransfer;
			  dt.setData('Text', $(this).attr('id'));
			});
			 	
	    $('#dropArea').on("dragenter dragover drop", function (event) {	
		   event.preventDefault();
		   if (event.type === 'drop') {
			   $(this).find('.dr').remove()
			  var data = event.originalEvent.dataTransfer.getData('Text',$(this).attr('id'));
			  de=$('#'+data).clone();
			  de.css({'position':'absolute','top':0+'px','left':0+'px'}).appendTo($(this));	
		   };
	   });