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>
<p> Drag two images in the targeted area. See when a new image is dragged, The previous image also remains in the targeted area.I want to remove the previous image and show only the new image in the targeted area. So THERE SHOWS ONLY ONE IMAGE AT A TIME</p>
		<div class="draggable">
			<img src="http://www.edgesportscenter.com/images/fort-collins-soccer-league-at-edge-sports.png" alt="">
                <img src="http://www.clipartlord.com/wp-content/uploads/2013/08/tennis-ball2.png" alt="">
		</div>
            
		<div id="droppable">
            drop
		</div>

CSS

div#droppable {
		width: 80px;
		height: 80px;
		background: red;
		color: #fff;
        
	}

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

JavaScript

$(function() {
    $(".draggable img").draggable({ 
        revert: function (socketObj) {
            if (!socketObj) {
                if ($(this).hasClass("droppedItems")) {
                    $(this).fadeOut(function() {
                        $(this).remove();
                    });
                } else {
                    $(".droppedItems").fadeIn();
                    return true;   
                }
            }
        },
        helper: "clone",
        start: function(event, ui) {
            $(".droppedItems").fadeOut();
        }
    }); 
    $( "#droppable" ).droppable({
        activeClass: "ui-state-default",
        hoverClass: "ui-state-hover",
        drop: function(event, ui) {
            $(".droppedItems").remove();
            var newClone = $(ui.helper).clone();
            newClone.addClass("droppedItems");
            $(this).append(newClone);
        }
	});
});