JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
 <div id="dvSource">
    <img src="http://placehold.it/200x200">
    <img src="http://placehold.it/200x200">
    <img src="http://placehold.it/200x200">
</div>
<hr />
<div id="dvDest">
    
</div>

CSS

body
{
    font-family: Arial;
    font-size: 10pt;
}
img
{
    height: 100px;
    width: 100px;
    margin: 2px;
}
.draggable
{
    filter: alpha(opacity=60);
    opacity: 0.6;
}
.dropped
{
    position: static !important;
}
#dvSource, #dvDest
{
    border: 5px solid #ccc;
    padding: 5px;
    min-height: 100px;
    width: 430px;
}

JavaScript

$("#dvSource img").draggable({
    revert: "invalid",
    //refreshPositions: true,
    drag: function (event, ui) {
        ui.helper.addClass("draggable");
    },
    stop: function (event, ui) {
        ui.helper.removeClass("draggable");
        if ($.ui.ddmanager.drop(ui.helper.data("draggable"), event)) {
				console.log($("#dvDest img").length);	
        }
        else {
            //alert(image + " not dropped.");
        }
    }
});
$("#dvDest").droppable({
    drop: function (event, ui) {
        if ($("#dvDest img").length == 0) {
            $("#dvDest").html("");
        }
        ui.draggable.addClass("dropped");
				$("#dvDest").append(ui.draggable);
    }
});