JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
<link rel="stylesheet" href="http://jqueryui.com/demos/demos.css">
<div class="demo">
    
<img border="0" src="http://t3.gstatic.com/images?q=tbn:ANd9GcQlkasKvtB9lfALOkATdxIxj-nBkaOj94pTXzDbB_Pz08wJopU&t=1&h=163&w=228&usg=__JzTdgXAMzvZwOAMZuNnh5wT2pVg=" class="draggable" style="position: relative;"/>


<div id="droppable" class="ui-widget-header">
    <p>Drop here</p>
</div>

CSS

#draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
    #droppable { width: 350px; height: 250px; padding: 0.5em; float: left; margin: 10px; }

JavaScript

$( ".draggable" ).draggable();
        $( "#droppable" ).droppable({
            drop: function( event, ui ) {
              processImage(ui.draggable);
            }
        });
function processImage($item)
{
alert($item.attr("src"));
}