JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
</head>
<body>
    <div class="tar" id="target"></div>
    <div class="dragme"></div>
    <div class="dragme"></div>
    <div class="dragme"></div>
    
</body>

CSS

#target {
    width:200px;
    height:200px;
    border: 1px solid black
}
.dragme {
    width:50px;
    height:50px;
    background-color:red;
    border:1px solid blue
}
.dragme.dropped {
    background-color:green
}

JavaScript

$('#target').droppable({
    accept: ".dragme",
    drop: function (event, ui) {
        ui.draggable.addClass('dropped');
        ui.draggable.draggable("disable");
        $('#target').droppable("option", "accept", "");
    }
});

$('.dragme').draggable({
    revert: 'invalid'
});