Non-Greedy Greed?!

HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>

<p>Order matters when using ui.droppable. For the first container droppable() is called first for the container and then for the nested droppable. For the second container droppable is first called for the nested droppable.</p>

<div class="draggable"></div>

<p>When dropping the blue box onto droppable in container 1 the outer element receives the drop event and the inner element does not clear the hoverClass.</p>

<div class="container">
    <div class="container-label">1</div>
    <div class="droppable"></div>
</div>

<p>When dropping the blue box onto droppable in container 2 the inner element receives the drop event and the outer element does not clear the hoverClass.</p>

<div class="container">
    <div class="container-label">2</div>
    <div class="droppable"></div>
</div>

<p>Expected: Order should not matter. Both elements (the container and the child element) should receive the drop event and the hoverClass should be cleared for both.</p>

CSS

body {
    font-family: sans-serif;
}
.draggable {
    margin: 1em 0;
    background-color: #9999ff;
    border: 1px solid #666699;
    width: 50px;
    height: 50px;
}
.droppable {
    background-color: #cccccc;
    border: 1px solid #999999;
    width: 100px;
    height: 100px;
}
.container {
    position: relative;
    margin: 1em 0;
    background-color: #eeeeee;
    border: 1px solid #cccccc;
    width: 50px;
    height: 50px;
}
.container-label {
    position: absolute;
    color: #999999;
    left: 0.5em;
    top: 0.5em;
}
.droppable {
    display: none;
}
.container:hover, .container.hover {
    width: 100px;
    height: 100px;
    padding: 50px;
}
.container:hover .droppable, .container.hover .droppable {
    display: block;
}
.hover {
    border: 1px solid #6666ff !important;
}
.dropped {
    background-color: #ffcccc !important;
}

JavaScript

$('.draggable').draggable({
    helper: 'clone',
    start: function() {
        $('.dropped').removeClass('dropped');
        $('.hover').removeClass('hover');
    }
});

$('.container').first().droppable({
    hoverClass: 'hover',
    over: function() {
        $.ui.ddmanager.prepareOffsets(
                $.ui.ddmanager.current, null);
    },
    out: function() {
        $.ui.ddmanager.prepareOffsets(
                $.ui.ddmanager.current, null);
    },
    drop: function() {
        $(this).addClass('dropped');
    }
});

$('.droppable').droppable({
    hoverClass: 'hover',
    drop: function() {
        $(this).addClass('dropped');
    }
});

$('.container').last().droppable({
    hoverClass: 'hover',
    over: function() {
        $.ui.ddmanager.prepareOffsets(
                $.ui.ddmanager.current, null);
    },
    out: function() {
        $.ui.ddmanager.prepareOffsets(
                $.ui.ddmanager.current, null);
    },
    drop: function() {
        $(this).addClass('dropped');
    }
});