JSFiddle - React, Tailwind, and code Playground

HTML

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

<div id="container">
  
</div>

CSS

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


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

JavaScript

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