JSFiddle - React, Tailwind, and code Playground

HTML

<div id="draggable" class="ui-widget-content">
    <p>Arraste para a esquerda</p>
</div>
<div id="droppable" class="ui-widget-header">
    <p>Largue aqui!</p>
</div>

CSS

#draggable {
     width: 100px;
     height: 100px;
     padding: 0.5em;
     float: right;
     margin: 10px 10px 10px 0;
 }
 #droppable {
     width: 150px;
     height: 150px;
     padding: 0.5em;
     float: left;
     margin: 10px;
 }

JavaScript

$(function () {
    $("#draggable").draggable();
    $("#droppable").droppable({
        drop: function (event, ui) {
            ui.draggable.hide();
            alert('desapareceu!');
        }
        
    });
});