JSFiddle - React, Tailwind, and code Playground

by Irvin Dominin

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',
     greedy: true ,
    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',
    greedy: true ,
    drop: function (event, ui) {
        ui.draggable.detach().appendTo($(this));
        $(ui.draggable).removeClass("insidePopup");
    }
});
$('#containers .frame .object').draggable({
    helper: 'clone',
    containment: "document"
});