javascript - jquery ui droppable 的贪婪设置不起作用？

Question

通过将 droppable widget 的 greedy 设置为 true，只有最顶层的元素应该响应 drop 事件。这里真的没有复杂性，但我就是无法让它工作。这就是我没有太多工作要做的:

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 属性的文档，我不确定我的理解是否与您相同:

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.

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

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