JSFiddle - React, Tailwind, and code Playground

HTML

<div class="dragger">
    <img id="obj1" src="http://placehold.it/80x80" />
</div>
<div class="dragger">
    <img id="obj2" src="http://placehold.it/80x80" />
</div>
<div id="contentHolder"></div>

CSS

#contentHolder {
    display: block;
    width: 100%;
    min-height: 500px;
    border: 2px dashed #999;
}
.dragger, .dragger-clone {
    cursor: -webkit-grab;
    display: inline-block;
}

JavaScript

$(document).ready(function () {
    $(".dragger").draggable({
        containment: 'html',
        helper: 'clone',
        stop: function (event, ui) {
            
            /* First, make the clone and append it 
             * to the droppable container
             */
            $(ui.helper)
                .clone(true)
                .removeClass('ui-draggable-dragging')
                .addClass('dragger-clone')
                .appendTo('#contentHolder');
            
            /* Next, make the clone draggable and 
             * contained by the droppable container
             */
            $(".dragger-clone")
                .draggable({ containment: '#contentHolder' });

            /* Now, make the image within the clone resizable
             */
            $(".dragger-clone img")
                .resizable({handles: 'ne, se, sw, nw'});
        }
    });
    $("#contentHolder").droppable();
});