JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.23/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css">
<script src="http://code.jquery.com/ui/1.8.23/jquery-ui.min.js"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/minified/i18n/jquery-ui-i18n.min.js"></script>

<div id="demo">   
    
    <div class="ui-widget-header droppableBox">
        <p>Drop here</p>
    </div>
        
    <div class="ui-widget-header droppableBox">
        <p>Drop here</p>
    </div>
        
    <div class="ui-widget-header droppableBox">
        <p>Drop here</p>
    </div>
        
    <div class="ui-widget-header droppableBox">
        <p>Drop here</p>
    </div>
    
    <div id="draggable" class="ui-widget-content">
        <p>Drag me to my target</p>
    </div>
</div>

CSS

#draggable { 
    position:absolute; width: 100px; height: 100px; padding: 0.5em; margin: 10px 10px 10px 0;z-index:2000; 
}

.active-droppable {
  background-color: yellow;
  -moz-box-shadow: inset 0px 0px 10px 0px #fff;
  -webkit-box-shadow: inset 0px 0px 10px 0px #fff;
  box-shadow: inset 0px 0px 10px 0px #fff;
}

#demo > .droppableBox {
    position:absolute;
    top: 150px;
    left: 150px;
}

#demo > .droppableBox:nth-child(1) {
    width: 500px; height: 500px;
    z-index: 100;
}

#demo > .droppableBox:nth-child(2) {
    width: 400px; height: 400px; margin: 50px;
    z-index: 101;
}

#demo > .droppableBox:nth-child(3) {
    width: 300px; height: 300px; margin: 100px;
    z-index: 102;
}

#demo > .droppableBox:nth-child(4) {
    width: 200px; height: 200px; margin: 150px;
    z-index: 103;
}

JavaScript

$(function() {
        var topElement = undefined;
		var topElementArray = Array();
    
        $( "#draggable" ).draggable();
        $( ".droppableBox" ).droppable({
            activeClass: "active-droppable",
            tolerance:'pointer',
            over: function( event, ui ) { 
                if ($(this).css("z-index") == 'auto') {
                    alert("Please provide z-index for every droppable.");
                    return;
                }
                topElement = undefined;
                topElementArray = Array();    	
      	    	$('#demo > .droppableBox').each(function(){      	    		
      	    		_left = $(this).offset().left, _right = $(this).offset().left + $(this).width();
      	    		_top = $(this).offset().top, _bottom = $(this).offset().top + $(this).height();
      	    		if (event.pageX >= _left && event.pageX <= _right && event.pageY >= _top && event.pageY <= _bottom) {
      	    			topElementArray.push($(this).attr('id'));
      	    		}
      	    	});
      	    },
            drop: function( event, ui ) {
                 console.log(""+topElementArray.length);
                topElement = determineTopElement(topElementArray);           			
                if ($(this).attr('id') == $(topElement).attr('id')) {
                    $( this ).addClass( "ui-state-highlight" ).find( "p" ).html( "Dropped!" );
                }
               
            }
        });
    
        determineTopElement = function(_array) {
            var topElement;
            var zIndexHighest = 0;
            for (i = 0; i < _array.length; i++){
               var element = $("#"+ _array[i]);
               var z_index = $(element).css("z-index");
               if( z_index > zIndexHighest){
                   zIndexHighest = z_index;
                   topElement = element;
               }
            }
            return topElement;       
        }
 });