JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>

<div id="parent">
    <div id="child">
    </div>
</div>

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

CSS

#parent {
    width: 500px;
    padding: 10px;
    background-color: #f00;
}

#child {
    width: 150px;
    height: 150px;
    background-color: #0f0;
}

.drag {
    width: 100px;
    height: 200px;
    background-color: #00f;
}

#parent.ui-state-hover, #child.ui-state-hover {
    background-color: #ff0;
}

JavaScript

$('#parent').droppable({
    'hoverClass': 'ui-state-hover',
    'tolerance': 'fit',
    'over': function() {
        console.log("OVER! SHOULDN'T HAPPEN!");
    }
});

$('#child').droppable({
    'hoverClass': 'ui-state-hover',
    'tolerance': 'pointer',
    'greedy': true
});

$('.drag').draggable({
    'revert': 'invalid', 
    'helper': 'clone'
});