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', function(){return false});
    },
    
    out: function(event, ui){
        ui.draggable.draggable('option', 'revert', function(){
            $(this).data('draggable').originalPosition = {
                top: 0,
                left: 0
            };
            return true;
        });
    }
});