JSFiddle - React, Tailwind, and code Playground

HTML

<div id = "target">Target</div>
<div class = "drag item1">obj1</div>
<div class = "drag item2">obj2</div>
<div class = "drag item3">obj3</div>

CSS

#target{
    height: 80px;
    width: 80px;
    background-color: red;
}

.item1, .item2, .item3{
    height: 40px;
    width: 40px;
    background-color: darkgreen;
    margin-top: 20px;
    position absolute;
}

JavaScript

$('.drag').draggable({
    revert: true
});

$('#target').droppable({
    drop: function(event, ui){
        ui.draggable.draggable( 'option', 'revert', false );
    },
    
    out: function(event, ui){
        ui.draggable.draggable( 'option', 'revert', true);
    }
});