JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css">
<div class="demo">
    
 <div id="draggable" class="ui-widget-content">
  <p>Drag from here</p>
  <div class="dragme">
   <img src="http://i142.photobucket.com/albums/r117/SaltyDonut/Icons/evilpuppy.gif">
   <img src="http://i251.photobucket.com/albums/gg316/X119/funny.gif">
  </div>
  <div class="dragme">
   <img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/cleanin.gif">
   <img src="http://i251.photobucket.com/albums/gg316/X119/funny.gif">
   </div>
  </div>
    
  <div id="droppable">
   <p>Drop here</p>
  </div>
  
</div>

CSS

#draggable, #droppable {
 width: 450px;
 height: 250px;
 padding: 0.5em;
 margin: 10px;
 background: #ddd;
 color:#000;
}
.dragme { 
 width: 100px;
 padding: 5px;
 float: left;

}
.dragme img {
 position: absolute;
 top: 0;
 left: 0;
}
.demo { width: 500px }

JavaScript

$(document).ready(function(){
 // add drag functionality
 $(".dragme").draggable({
  revert : true,
  containment : '.demo'
 });

 $("#droppable").droppable({
   drop : function(e, ui) {
    ui.draggable.appendTo($(this));
   }
 })
})