1

我编写了 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 <- 我已经解决了这个问题...请参阅下面的答案

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

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

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

当框 3 被拖到框 2 上时，我是否缺少一些技巧让 jQuery 检测框 2，并将其添加到那里？

4

1 回答 1

1

在与 jQuery UI 的（咳咳）稀疏文档作斗争之后，我有片刻的清醒。

droppable 选项 '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 上。这是如果贪婪为假（即默认值）时产生的标记......

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

这是如果贪婪设置为真时产生的标记......

<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 回答