JSFiddle - React, Tailwind, and code Playground

HTML

<div class="demo">
    
    <div id="draggable" class="ui-widget-content">
        <p>Drag from here</p>
        <div class="dragme"><img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/cleanin.gif"><br><span class="caption">Drag me to my target</span></div>
        <div class="dragme"><img src="http://i201.photobucket.com/albums/aa236/Mottie1/testsite/styles/jammin.gif" height="100"><br><span class="caption">Drag me to my target</span></div>
    </div>
    
    <div id="droppable">
        <p>Drop here</p>
    </div>
    
</div>

CSS

#draggable { width: 250px; height: 500px; padding: 0.5em; float: left; margin: 10px; background: #ddd;  }
#droppable { width: 250px; height: 500px; padding: 0.5em; float: left; margin: 10px; background: #ccc; }
.dragme { background: #999; text-align: center; width: 100px; padding: 5px; }
.fade { opacity: 0.3 }
.ui-state-highlight { border: #333 1px solid; }

JavaScript

$(document).ready(function(){

 // set up the draggable items
 $(".dragme").draggable({
  helper : 'clone',                 // you will drag a copy of the item around
  revert : true,                    // draggable returns home if released
  start: function(e,ui){
   $(this).addClass('fade');        // fade out original item while dragging the clone
   ui.helper.find('.caption').text("I'm being dragged!"); // message in clone
  },
  stop: function(e,ui){
   $(this).removeClass('fade');     // remove fade if dragged item is released
  }
 });

 $("#droppable").droppable({
  drop: function(e, ui) {
   $(this).addClass('ui-state-highlight');            // add drop box highlight (border)
   var src = ui.draggable.find('img').attr('src');    // set img URL
   $('#droppable')
       .css({
           backgroundImage    : 'url(' + src + ')',   // set background image
           backgroundPosition : 'center center',      // position background image
           backgroundRepeat   : 'no-repeat'           // don't repeat image
       });
   ui.helper.remove();                                // remove clone
  }
 });

})