jquery UI 可滴的贪婪设置不起作用？

Question

通过将可丢弃小部件的贪婪设置为true，只有最顶层的元素应该响应丢弃事件。这里真的没有复杂性，但我就是无法让它工作。这就是我没有什么可做的：

.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')
        }
    })

}

现在发生的事情是，所有拖放的元素都在响应丢弃事件。由于要保留的代码太少，我不知道如何诊断它。

Answer 1

阅读 greedy 属性的文档，我不确定我是否理解与您相同：

默认情况下，当元素被放置在嵌套的可放置对象上时，每个可放置对象都将接收该元素。但是，通过将此选项设置为 true，任何父可放置对象都不会收到该元素。

对我来说，这意味着如果你有一个大的div droppable其中包含另一个较小的div droppable那么如果你在小元素中放置一个元素，只有小的元素会收到事件。

查看此演示以了解我在解释的内容：http://jquery-ui.googlecode.com/svn/tags/1.6rc4/demos/droppable/greedy.html