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() {
    var makeDraggable = function(element) {
        element.draggable({ 
	    	revert: "invalid",
	    	appendTo: "#droppable",
	    	helper: "clone" 
	    });
        element.bind('dragstop', function(event, ui) {
            var newClone = $(ui.helper).clone();
            makeDraggable(newClone);
            $(this).after(newClone);
            alert($('img').size());
        });
    }
	makeDraggable($(".draggable img"));
	$( "#droppable" ).droppable({
        activeClass: "ui-state-default",
        hoverClass: "ui-state-hover"
	});
});