JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<div class="layer1">
    <div class="r">
        <div class="item"></div>
    </div>    
</div>
<div class="layer2">
    <div class="r">
        <div class="item"></div>
    </div>
</div>

<div class="drag"></div>

CSS

.drag {
    width: 20px;
    height: 20px;
    background-color: #000;
    position: absolute;
    left: 500px;
    top: 200px;
    cursor: move;
    z-index: 3;
}

.layer1, .layer2 {
    position: absolute;
    width: 200px;
    height: 300px;
    border: 1px solid black;
    z-index: 1;
}

.layer2 {
    left: 50px;
    top: 50px;
    background-color: #ccc;
    opacity: 0.5;
    z-index: 2;
}

.r {
    position: relative;
    height: 100%;
}

.layer1 .item {
    width: 100px;
    height: 100px;
    position: absolute;
    background-color: #444;
    opacity: 0.3;
}

.layer2 .item {
    width: 150px;
    height: 150px;
    position: absolute;
    background-color: #444;
    opacity: 0.3;
}

JavaScript

$(document).ready(function () {
    $('.layer1 .item').droppable({
        drop: function () {
            greedy: true,
            alert('dropped on item in layer 1');
        }
    });
    
    $('.layer2 .item').droppable({
        drop: function () {
            greedy: true,
            alert('dropped on item in layer 2');
        },
        over: function(event, ui){
             $( ".layer1 .item" ).droppable( "disable" )
        },
        out: function(event, ui){
            $( ".layer1 .item" ).droppable( "enable" )
        }
    });
    
    $('.drag').draggable({});
});