JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<h4>This is a draggable image page</h4>
		<div class="draggable">
			<img src="http://i.imgur.com/z9qSJds.png" alt="">
		</div>
		
		<div id="droppable">			
		</div>

CSS

div#droppable {
		width: 250px;
		height: 200px;
		background: #eee;
		float: right;
        margin-top:-100px;
	}

	.draggable img {
		width: 40px;
		height: 40px;
	}
	.ui-draggable-dragging {
		width: 40px;
		height: 40px;
	}

JavaScript

$(function() {
    $(".draggable img").draggable({ 
        revert: "invalid",
        helper: "clone" 
    });   
    $("#droppable").droppable({
        activeClass: "ui-state-default",
        hoverClass: "ui-state-hover",
        drop: function(event, ui) {
            var newClone = $(ui.helper).clone();
            $(this).after(newClone);
        }
	});
});