JSFiddle - React, Tailwind, and code Playground

HTML

<div class="dragImg"><img src="http://placehold.it/80x80">
             </div>


<div class="ui-layout-center"> </div>

CSS

.ui-layout-center {
    width: 400px;
    height: 300px;
    border: 1px solid black;
}

.ui-state-hover {
    background-color: #red;   
}
#dropHere {
    width:400px;
    height: 400px;
    border: dotted 1px black;
    
}

JavaScript

jQuery(function() {
    jQuery(".dragImg").draggable({
        //  use a helper-clone that is append to 'body' so is not 'contained' by a pane
        helper: function() {
            return jQuery(this).clone().appendTo('body').css({
                'zIndex': 5
            });
        },
        cursor: 'move',
        containment: "document"
    });

    jQuery('.ui-layout-center').droppable({
        activeClass: 'ui-state-hover',
        accept: '.dragImg',
        drop: function(event, ui) {
            if (!ui.draggable.hasClass("dropped"))
                jQuery(this).append(jQuery(ui.draggable).clone().addClass("dropped").draggable());
            }
        });
    });