JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <body>
        
        <div id="divProductFrame" style="float:left; height:321px; width:600px; position:relative; border-width:10px; border-color:#FFAF0C0C; border-style:solid;">Essa div(divProductFrame) tem uma imagem como bg, Ă© um frame para fotos.
        </div> 
        <div class="editingPhoto">
            <img src="http://placekitten.com/g/230/150" id="img1" alt="Foto1" style="z-index:-1; position:absolute; width:230px; top:60px; left:100px;" />
        </div>
        <div class="editingPhoto">
            <img src="http://placekitten.com/g/230/230" id="img2" alt="Foto2" style="z-index:-1; position:absolute; width:230px; top:110px; left:270px;" />
        </div>
    </body>
</html>

CSS

.helper img {
    opacity: 0;
    filter:alpha(opacity=0);
}

JavaScript

$(function() {
    $('.editingPhoto').each(function() {
        $(this).clone().data('parent', $(this)).css('z-index', 10)
            .insertAfter($(this))
            .toggleClass('helper editingPhoto')
            .draggable({
                start: function() {
                    $('.editingPhoto').css('z-index', -2);
                    $(this).data('parent').css('z-index', -1);
                },
                drag: function() {
                    $(this).data('parent').offset($(this).offset());
                }
            });
    });
});