JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.min.js"></script>
<div class="draggable">I drag</div>
<div class="droppable-container">
    <div class="droppable">I accept but am obscured 1</div>
    <div class="droppable">I accept 1</div>
</div>

CSS

div
{
    height: 100px;
    width: 100px;
    border: 1px solid black;
    background-color: white;
}

.draggable
{
    z-index: 100;
}
.droppable-container
{
    width: auto;
    height: auto;
    border: none;
}

.droppable:last-child
{
    position: relative;
    top: -70px;
    left: 20px;
}

JavaScript

$('.draggable').draggable({
    appendTo: 'body',
    opactity: 0.25
});

$('.droppable').droppable({
    drop: function(){
        console.log( this );
    },
    tolerance: 'pointer'
});