JSFiddle - React, Tailwind, and code Playground

HTML

<div class="drag">Draggable</div>
<div class="drop">Droppable</div>

CSS

.drag{
    width: 70px;
    height: 70px;
    background: red;
}

.drop{
    height: 400px;
    width: 400px;
    background:green;
}

JavaScript

$(".drag").draggable({
    revert: "invalid",
    helper: "clone"
});

$(".drop").droppable({
    accept: ".drag",
    drop: function(event,ui){
      ui.helper.remove();
      $(this).append(ui.draggable);
      $(ui.draggable).draggable("destroy");
    }
});