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

    })


}

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

Answer 1

阅读greedy属性的文档我不确定我和你一样：

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

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

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

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

1 个答案: