jQuery UI droppables in overflow scroll containers

Question

Hi

I did ask this question already at the jQuery forums, but they are not as active as here.

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:

Markup:

<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>
        </ul>
    </div>
</div>

Javascript:

//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
Query('.scroll-droppables li').droppable({
    drop: function(event, ui) {
        alert('Dropped on scrolling drop area!');
    }
});

I did try make the static drop area 'greedy', but that didn't seem to help in the situation.

Any idea on how to stop this happening?

Answer 1

I had the same problem. I was able to fix it by initializing the "static" Droppable first..