1

通过将 droppable 小部件的 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')
        }

    })


}

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

4

1 回答 1

2

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

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

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

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

于 2012-12-09T18:08:40.280 回答