jQuery - droppable event propagation issue

Original source taken from https://jqueryui.com/droppable/#propagation.

by Deepankar Jain

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<title>jQuery UI Droppable - Prevent propagation</title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<body>
    <div id="explanation">
        <h4><b>jQuery Issue:</b> Over event isn't propagated if nested droppable doesn't accept draggable under a certain scenario</h4>
        <br/>
        <div id="steps">
            <b>Steps:</b>
            <ol>
                <li>Click on and drag Draggable 1 onto the inner droppable of Droppable 3.  Continue to hold Draggable 1, do not release it.</li>
                <li>Note that when Draggable 1 is on the inner droppable and the pointer is fully over the area of Droppable 3, the outer Droppable 3 is highlighted, which is expected.</li>
                <li>Move Draggable 1 beyond the bounds of Droppable 3 and release it so that it's resting entirely in whitespace.</li>
                <li>Click and drag Draggable 2.  You only have to drag it to some random whitespace spot, <em>not</em> on a droppable.</li>
                <li>Release Draggable 2.</li>
                <li>Grab Draggable 1 again and drag it onto the inner droppable of Draggable 3. Continue to hold Draggable 1, do not release it.</li>
                <li>When Draggable 1 is on the inner droppable and the pointer is fully over the area of Droppable 3, take a note of the state of the outer Droppable 3 container.</li>
            </ol>        
        </div>
        <div id="expected">
            <b>Expected results:</b>
            <ul>
                <li>The outer Droppable 3 container is highlighted when Draggable 1 is entirely on the inner droppable and within the bounds of Droppable 3.</li>
            </ul>        
        </div>
        <div id="actual">
            <b>Actual...

CSS

#draggable, 
#draggable2 {
    width: 100px;
    height: 40px;
    padding: 0.5em;
    float: left;
    margin: 10px 10px 10px 0;
}

#explanation {
    margin: 10px
}

#droppable,
#droppable2,
#droppable3 {
    width: 230px;
    height: 120px;
    padding: 0.5em;
    float: left;
    margin: 75px;
}

#droppable-inner,
#droppable2-inner,
#droppable3-inner {
    width: 170px;
    height: 90px;
    padding: 0.5em;
    float: left;
    margin: 10px;
}

JavaScript

$(function() {
    $("#draggable, #draggable2").draggable({
        cursor: "move",
        cursorAt: {
            top: 0,
            left: 0
        },
    });
    
    function logEventId(prefix, event) {
   		console.log(prefix + ": " + event.target.id); 
    }
    function createLogEventIdFunction(handlerName) {
    	return function(event, ui) {
        	logEventId(handlerName, event);
        }
    }

    $("#droppable, #droppable-inner").droppable({
        activeClass: "ui-state-hover",
        hoverClass: "ui-state-active",
        tolerance: "pointer",
        over: createLogEventIdFunction("over"),
        out: createLogEventIdFunction("out"),
        drop: function(event, ui) {
            logEventId("drop", event);
            $(this)
                .addClass("ui-state-highlight")
                .find("> p")
                .html("Dropped!");
            return false;
        }
    });

	function decorateWithDroppable(selector, greedy, canAccept, over) {
    	canAccept = !!canAccept ? canAccept : function(element) {
        	console.log("canAccept: this: " + $(this).attr("id") + ", el: " + element.attr("id") + ", result: true");
            return true;
        };
        
        over = !!over ? over : createLogEventIdFunction("over");
    
        $(selector).droppable({
            greedy: greedy,
            activeClass: "ui-state-hover",
            hoverClass: "ui-state-active",
            tolerance: "pointer",
            accept: canAccept,
            over: over,
            out: createLogEventIdFunction("out"),
            drop: function(event, ui) {
                logEventId("drop", event);
                $(this)
                    .addClass("ui-state-highlight")
                    .find("> p")
                    .html("Dropped!");
            }
        });
    };
    
    decorateWithDroppable("#droppable2, #droppable2-inner", true);
    decorateWithDroppable("#droppable3", true);
    decorateWithDroppable("#droppable3-inner",...