jQuery droppable问题

Question

我编写了jQuery代码，允许用户在屏幕上创建2个框，然后将其拖放到另一个框中。从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＆lt; - 我已经解决了问题...请参阅下面的答案

单击左上角的“H”按钮创建一个框。抓住框右上角的灰色方块，将其向下拖动到页面中。将鼠标移到框的边缘或角落，然后调整其大小。

然后再次单击“H”以创建框2.将框2拖放到框1中。这可以正常工作。如果你使用Firefox，你可以看到在鼠标悬停时添加到方框1的方框。

我遇到的问题是在创建方框3时，将其移到方框2上并尝试将其放入内部。它只检测到第1个框并将其放入其中。

当框3被拖过它时，是否有一些技巧我缺少jQuery检测框2，而是将它添加到那里？

Answer 1

在与jQuery UI（ahem）稀疏文档挣扎之后，我只是有一点清晰。

droppable选项'greedy'确定一个对象落在可放置对象树上时落地的位置。

设置为false（默认值）时，删除的对象将落在树中最低的droppable对象上。设置为true时，被删除的对象将落在树中的第一个（即最高的）可放置对象上。

这可以通过示例使用以下标记来证明。想象一下，以下div都是可放置的对象......

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

在div＃level_3_container上删除了一个可拖动的对象（下面给出了id =“all_new_container”）。如果贪婪是假的（即默认值）......这就是结果的标记......

<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级以外的错误位置的定位错误。我不会在上面的示例中修复它，并且没有必要为上述演示这样做。