JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/smoothness/jquery-ui.css">

<div class="demo">

    <div id="draggable1" class="ui-widget-content">
        <p>1. Drag me to my target</p>
    </div>
    
    <div id="draggable2" class="ui-widget-content">
        <p>2. Drag me to my target</p>
    </div>
    
    
    <div id="droppable1" class="ui-widget-header">
        <p>Drop here</p>
    </div>
    
    <div id="droppable2" class="ui-widget-header">
        <p>Drop here</p>
    </div>
    
</div>

CSS

#draggable1, #draggable2
{
    width: 100px; 
    height: 100px; 
    padding: 0.5em; 
    float: left; 
    margin: 10px 10px 10px 0; 
    background: cyan;
}
    
#droppable1, #droppable2 
{ 
    width: 150px; 
    height: 150px; 
    padding: 0.5em; 
    float: left; 
    margin: 10px; 
}

/*.ui-droppable
{
    z-index: 1;
}

.ui-draggable
{
    z-index: 2;
}*/

JavaScript

$("#draggable1").draggable({disabled: true});
$("#draggable2").draggable().draggable("disable");
$("#droppable1").droppable({
    disabled: true,
    drop: function(event, ui) {
        $(this).addClass("ui-state-highlight").find("p").html("Dropped 1!");
    }
});
$("#droppable2").droppable({
    drop: function(event, ui) {
        $(this).addClass("ui-state-highlight").find("p").html("Dropped 2!");
    }
})
.droppable("disable")
;