JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <body>
        <div id="hoge">
            hoge
        </div>
        <div id="piyo">
            piyo
            <div id="element1" class="mage"></div>
            <div id="element2" class="mage"></div>
        </div>
    </body>
</html>

CSS

.mage{
    position:fixed;
}
#hoge{
    position:fixed;
    left:0px;
    width:50%;
    height:100%;
    background-color:silver;
}
#piyo{
    position:fixed;
    right:0px;
    width:50%;
    height:100%;
    background-color:tan;
}
#element1{
    background-color:blue;
    width:50px;
    height:50px;
}
#element2{
    background-color:red;
    width:50px;
    height:50px;
}

JavaScript

$("#hoge,#piyo").droppable({
    drop:function(e,ui){
        ui.draggable.appendTo(this);
    }
});

$(".mage").draggable({
    containment:"document"
});