Parent droppable takes precedence over dynamically created child droppable

If a container div (known as container) is droppable and I dynamically create another div (known as emptyBox) and make emptyBox droppable, the drop event never fires for emptyBox, because the drop event for container is taking precedence. This container shows up in the list of droppables before any dynamically created droppable. As a result, the container is returned as the area in which to drop the draggable.

The droppable code should recognize that I'm trying to drop into emptyBox rather than container, but it does not, because container's drop event is taking precedence.

To see the problem in action:

1. Edit boxWidget.html and fix the reference to jQuery-ui (current reference is local) and open the file in your browser

2. Drag the colored boxes from the top into the 3 empty boxes shown in the container

3. Drag a 4th colored box from the top over the container, but not inside one of the boxes. (A new empty box will be generated, the container height will be adjusted, and your colored box will be appended to the empty box)

4. Remove the colored box you just added in step 3.

5. Drag one of the colored boxes form the first row inside the container into the empty box (the one we just emptied in step 4)

Expected result: The colored box that you just dragged into the empty box should remain in the empty box

Actual result: The colored box goes back to its original position. The 'absorbBox' function is called, indicating that the drop event for container was fired instead of the drop event for emptyBox.