Question

By setting droppable widget’s greedy to true, only the top-most element should respond to a drop event. There’s really no complexity here but I just cannot get it to work. And this is all I have so not much to work on:

CSS:

.page{
    position:    absolute;
    width:       150px; 
    height:      150px;
    left:        0px; 
    top:         0px;
    text-align:  center;
    background:  #F0FFFF;
    border:      1px solid #89B;
}

HTML:

<div class = 'page' id = 'page1'> page1 </div>
<div class = 'page' id = 'page2'> page2 </div>
<div class = 'page' id = 'page3'> page3 </div>

JS:

document.ready = function(){


    $('.page').draggable()


    $('.page').droppable({

        greedy: true,

        drop: function( event, ui ){

            console.log( 'assert drop once')
        }

    })


}

what’s happening right now is that all the dropped on elements are responding to the drop event. Since there’s so little code to hold on to, I have no idea how to diagnose this.

Answer 1

Reading the documentation for the greedy property I’m not sure I understand the same as you:

By default, when an element is dropped on nested droppables, each droppable will receive the element. However, by setting this option to true, any parent droppables will not receive the element.

For me it means if you have a large div droppable which contains another smaller div droppable then if you drop an element in the small one only the small one will receive the event.

Check this demo to understand what I’m explaining : http://jquery-ui.googlecode.com/svn/tags/1.6rc4/demos/droppable/greedy.html