JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/jquery-ui-git.css">
<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
<div id="draggable"></div>
<div id="droppable"></div>
<div id="droppable2"></div>

CSS

#draggable {
    width: 100px; 
    height: 100px; 
    border: 1px solid black;
    //margin: 10px;
}
#droppable, #droppable2 { 
    width: 200px; 
    height: 200px; 
    border: 1px dotted black;
    //margin: 10px;
}
#droppable.has-draggable, #droppable2.has-draggable {
    border: 1px solid green;
}

JavaScript

$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
    over: function() {
        console.log( "over" );
    },
    out: function() {
        console.log( "out" );
    }
});
$( "#droppable2" ).droppable({
    over: function() {
        console.log( "over2" );
    },
    out: function() {
        console.log( "out2" );
    }
});