JSFiddle - React, Tailwind, and code Playground

HTML

<div id="containers">
        <div class="frame">
            <div class="popup">Popup</div>
            <div class="object">Object 1</div>
            <div class="object">Object 2</div>            
        </div>
    </div>

CSS

* { font-family: sans-serif; font-size: 12px; }

.tool, .frame, .object, .popup, .drop{ 
    border: 1px solid #888; 
    margin: 10px; 
    padding: 3px; 
    border-radius: 5px;
    box-shadow: 1px 2px 4px #aaa;
}

#tools .tool, #tools .frame {
    height: 50px;
    width: 50px;
    float: left;
    background-color: #fee;
}

#containers { 
    clear: both;
    width:500px;
}

#containers .frame {
    min-height: 50px;
}

#containers .object{
    min-height: 20px;
}

#containers .popup{
    min-height: 20px;
}

#containers .drop{
    min-height: 20px;
}



#containers .frame {
    background-color: #eef;   
}


#containers .tool {
    background-color: #fee;   
    height: auto;
    min-height: auto;
}

#containers .object {
    background-color: green;   
    height: auto;
    min-height: auto;
}


#containers .ph {
    margin: 10px;
    padding: 3px;
    border: 1px solid #0f0;
    border-radius: 5px;
    width:100%;
}

.ui-state-hover{
    background: red;
}

JavaScript

$('#containers .frame .popup').droppable({
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    accept: '.object',
    drop: function(event, ui) {
        $(ui.draggable).addClass("insidePopup");
        ui.draggable.detach().appendTo($(this));
    }
});

$('#containers .frame').droppable({
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    accept: '.insidePopup',
    drop: function(event, ui) {     
        ui.draggable.detach().appendTo($(this));  
        $(ui.draggable).removeClass("insidePopup");        
    }
});
$('#containers .frame .object').draggable({
    helper: 'clone',
    containment:"document"
});