JSFiddle - React, Tailwind, and code Playground
HTML
<div class="drag">image</div>
<div class="drag">image</div>
<div class="container">container</div>
CSS
.drag {
background: green;
width:50px;
height:50px;
margin:10px;
}
.container {
width:200px;
height:200px;
background: yellow;
}
JavaScript
$(".drag").draggable({
revert: "invalid",
helper: "clone"
});
$(".container").droppable({
accept: ".drag",
drop: function (event, ui) {
$(this).css("background-color", "yellow");
$(ui).draggable("enable");
},
over: function (event, ui) {
$(this).css("background-color", "green");
},
out: function (event, ui) {
$(this).css("background-color", "yellow");
}
});