Jquery droppable

by TJ VanToll

HTML

<link href="http://code.jquery.com/ui/jquery-ui-git.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-git.js"></script>
<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>

<div id="c1">C1
    <div id="c2">C2
        <div id="c3">C3</div>
    </div>
</div>

CSS

div {
    position: absolute;
    color: white;
}
#c1 {
    background-color: black;
    top: 25px;
    left: 25px;
    width: 200px;
    height: 200px;
}
#c2 {
    background-color: green;
    top: 37px;
    left: 37px;
    width: 125px;
    height: 125px;
}
#c3 {
    background-color: blue;
    top: 37px;
    left: 37px;
    width: 50px;
    height: 50px;
}
.drop-hover {
    outline: 5px solid red !important;
}

JavaScript

// BUG: GREEDY & NESTED HOVERING BEHAVIOUR

// STEPS TO REPRODUCE:
// 1. Start dragging C2 and keep within C1, C1 hoverClass is applied
// 2. Start dragging C3 and keep within C2, C2 hoverClass is applied
// 3. Start dragging C2, *BUG* C1 hoverClass is not applied

// EXPECTED BEHAVIOUR:
// At step 3, hoverClass should be reapplied to C1

$(function () {
    $("div").draggable();
    $("div").droppable({
        greedy: true,
        hoverClass: 'drop-hover'
    });
});