JSFiddle - React, Tailwind, and code Playground

by cfddream

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/200/300" 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/300/200" id="img2" alt="Foto2" style="z-index:-1; position:absolute; width:230px; top:110px; left:270px;" />
        </div>
    </body>
</html>

CSS

#divProductFrame {
   pointer-events: none;   
}

JavaScript

$(function () {
    $('.editingPhoto').draggable();
});