1

ユーザーが画面上に2つのボックスを作成し、一方を他方にドラッグアンドドロップできるようにするjQueryコードを作成しました。HTMLの観点からは、次のようになります...

<div id="1">
    <div id="2">
    </div>
</div>

次に、別のボックスを作成し、それをボックス2の上にドラッグしてドロップすると、常にボックス1（つまりボックス2の親）にドロップされます。私が欲しいのはこれです...

<div id="1">
    <div id="2">
        <div id="3">
        </div>
    </div>
</div>

...しかし、私が得るのはこれです...

<div id="1">
    <div id="2">
    </div>
    <div id="3">
    </div>
</div>

あなたは[以前は可能でした]これがここで起こっているのを見る ことができます... http：//acarna.com/editor.php <-私は問題を修正しました...以下の私の答えを参照してください

左上の「H」ボタンをクリックしてボックスを作成します。ボックスの右上隅にある灰色の四角をつかんで、ページのさらに下にドラッグします。ボックスの端または隅にマウスを移動して、サイズを変更します。

次に、もう一度「H」をクリックしてボックス2を作成します。ボックス2をボックス1にドラッグアンドドロップします。これは正しく機能します。Firefoxを使用している場合は、マウスオーバーでボックス1に追加されたボックスが表示されます。

私が抱えている問題は、ボックス3を作成し、それをボックス2の上に移動して、中にドロップしようとするときです。ボックス1のみを検出し、その中にドロップします。

ボックス3をドラッグしたときにjQueryがボックス2を検出し、代わりにそこに追加するために欠けているトリックはありますか？

4

1 に答える 1

1

jQuery UI の (エヘム) まばらなドキュメントに苦労した後、私は少しだけ明確になりました。

ドロップ可能なオプション 'greedy' は、オブジェクトがドロップ可能なオブジェクトのツリーにドロップされたときに、オブジェクトがどこに着陸するかを決定します。

false (デフォルト) に設定すると、ドロップされたオブジェクトは、ツリー内のドロップ可能な最下位のオブジェクトに配置されます。true に設定すると、ドロップされたオブジェクトは、ツリー内の最初の (つまり、最上位の) ドロップ可能なオブジェクトに配置されます。

これは、例として次のマークアップを使用して実証できます。次の div がすべてドロップ可能なオブジェクトであると想像してください...

<div id="bottom_container">
    <div id="level_2_container">
        <div id="level_3_container">
        </div>
    </div>
</div>

ドラッグ可能なオブジェクト (以下の id="all_new_container" を指定) が div#level_3_container にドロップされます。greedy が false (つまりデフォルト) の場合の結果のマークアップは次のとおりです...

<div id="bottom_container">
    <div id="level_2_container">
        <div id="level_3_container">
        </div>
    </div>
    <div id="all_new_container">
    </div>
</div>

greedy が true に設定されている場合のマークアップは次のとおりです...

<div id="bottom_container">
    <div id="level_2_container">
        <div id="level_3_container">
            <div id="all_new_container">
            </div>
        </div>
    </div>
</div>

Firebug がある場合は、ここでオブジェクトを他のオブジェクトにドロップすると、上記の現象が発生します... http://acarna.com/editor.php

新たにドロップされた要素がレベル 2 を超えて間違った場所に着地するというポジショニングのバグはご容赦ください。上記の例では修正しませんが、上記のデモンストレーションでは修正する必要はありません。

于 2011-12-22T22:46:02.367 に答える