JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<div id="parent">
    <div class="child-droppable">
    </div>
</div>

<div class="dragme">
</div>

CSS

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

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

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

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

JavaScript

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

$('.child-droppable').droppable('option', 'greedy', true);

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