1

ドロップ可能なウィジェットの greedy を 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')
        }

    })


}

現在起こっていることは、ドロップされたすべての要素がドロップ イベントに応答していることです。保持するコードがほとんどないため、これを診断する方法がわかりません。

4

1 に答える 1

2

プロパティのドキュメントを読むgreedyと、あなたと同じことを理解しているかどうかわかりません:

デフォルトでは、ネストされたドロップ可能オブジェクトに要素がドロップされると、各ドロップ可能オブジェクトがその要素を受け取ります。ただし、このオプションを true に設定すると、親のドロップ可能オブジェクトは要素を受け取りません。

私にとっては、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 に答える