JSFiddle - React, Tailwind, and code Playground

HTML

<div id="draggables">
    <div id="d1">
        <header>A</header>
    </div>
    <div id="d2">
        <header>B</header>
    </div>
    <div id="d3">
        <header>C</header>
    </div>
</div>


<img src="http://bob.unitracer.nl/trash-can.jpg" id="trash" class="semitransparent" height="100"/>

JavaScript

$(function(){
    // draggables...

    $("#d1,#d2,#d3").draggable({
        revert:"invalid"
    });

    $("#trash").droppable({
        activeClass:"opaque",
        drop: function(event, ui){
            ui.draggable.fadeOut(function(){
                ui.draggable.remove();

            });
        }
    });
});