JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <body>
        <div id="hoge">
            hoge
        </div>
        <div id="piyo">
            piyo
            <div id="element1" class="mage" style="background:blue;">1</div>
            <div id="element2" class="mage" style="background:red;">2</div>
        </div>
    </body>
</html>

CSS

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

JavaScript

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

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