Droppables in overflow scroll containers

Droppables in overflow scroll containers

Hi

I have encountered a problem when I have multiple droppable areas on a page.  I have a 'static' droppable area that will never move, above a div that has multiple droppable areas and can scroll (overflow: scroll).  When I scroll the div so that one of the droppables in the div is 'under' the static droppable, the drop event is fired for both areas if I drop on the static area.

Sorry, this explanation might be vague, so I put together a sample:

  1. <div style="float:left; width:300px; height: 300px; border: 1px solid #000;">
        <ul class="draggables">
            <li>Draggable</li>
            <li>Draggable</li>
            <li>Draggable</li>
            <li>Draggable</li>
            <li>Draggable</li>
        </ul>
    </div>

    <div style="float:left; width:300px; height: 300px; border: 1px solid #000;">
        <div class="static-droppable" style="width:298px; height:100px; border:1px solid #f00;">Static Drop Area</div>
        <div style="width:298px; height:198px; overflow-y:scroll; border:1px solid #0f0;">
            <ul class="scroll-droppables">
                <li style="border:1px solid #00f; height:60px;">Droppable</li>
                <li style="border:1px solid #00f; height:60px;">Droppable</li>
                <li style="border:1px solid #00f; height:60px;">Droppable</li>
                <li style="border:1px solid #00f; height:60px;">Droppable</li>
            </u>
        </div>
    </div>



















  2. //create draggables
    jQuery('.draggables li').draggable({
            revert: 'invalid',
            cursor: 'move',
            helper: 'clone'
    });

    //the static droppable area
    jQuery('.static-droppable').droppable({
            greedy: true,
            drop: function(event, ui) {
                alert('Dropped on static drop area!');
            }
    });

    //scrolling droppables
    jQuery('.scroll-droppables li').droppable({
            drop: function(event, ui) {
                alert('Dropped on scrolling drop area!');
            }
    });



















I tried to make the static droppable greedy, but that didn't stop it.
Any help would be appreciated, thanks!