JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
When the yellow square is dropped on the red square, a drop event triggers an alert. The red square extends beyond its 100x100 pixel parent, but the parent's overflow is set to hidden, but drop still gets triggered.
<div class="a"><div class="b"></div></div>
<div class="c"></div>

CSS

.a {
    width: 100px;
    height: 100px;
    background-color: green;
    overflow: hidden
}

.b {
    width: 200px;
    height: 200px;
    background-color: red;
}

.c {
    width: 20px;
    height: 20px;
    background-color: yellow;
}

JavaScript

$(".c").draggable({});
$(".b").droppable({drop:function() {
    alert("hello");
}});