JSFiddle - React, Tailwind, and code Playground

HTML

<div id="drop"></div>
<div class="drag">1</div>
<div class="drag">2</div>
<div class="drag">3</div>

CSS

#drop {
    height:100px;
    width:100px;
    background-color:red;
    margin:auto;
}
#drop > .drag {
    position: static!important;
}
.drag {
    height:20px;
    width:80px;
    background-color:green;
}

JavaScript

$(".drag").draggable();
$("#drop").droppable({
    drop: function (event, ui) {
        console.log(ui);
        ui.draggable.appendTo("#drop").siblings().remove();
    }
});