如果它们都应该是，为什么只有 4 个盒子中的 1 个可以丢弃？

Question

在我的sandbox site，如果您加载它，几秒钟后会出现一个带有“确认”按钮的下拉菜单。如果您单击该“确认”按钮，则背景图像会更改并加载一些新框。新加载的页面上的四个小盒子是可拖动的，白盒子里面的4个盒子应该是可拖放的，但只有一个是可拖放的。

新更新-这是整个代码的工作小提琴。单击小提琴上的“提交”。新框加载后，它们都是可拖放的。 Working fiddle of whole code

但是，在我的沙盒网站上，实际上只有一个盒子（第 2 页大白盒子中的红色盒子）是可放置的。

重要提示 -- 如果我更改了红色框上的 CSS 位置，由于某种原因它不再可放置。例如，我在红色和浅绿色盒子上交换了 left: 位置，它从红色盒子中移除了可放置的功能，因此没有一个盒子是可放置的。

另一个新的更新我在一个非 wordpress 网站上重新创建了这个问题，所以我们知道这不是 wordpress 问题或 wordpress 插件问题non-wordpress site。除了在这个网站上，不是第二页上的红色框是可放置的，只有深蓝色的框。

另一个新的更新第一个回复这个帖子的人发现，如果从 dom 中移除红色盒子，浅蓝色盒子就会变成 droppable...

知道如何解决这个问题吗？另外，您能否告诉我如何将 console.log 添加到此代码中，以便我可以尝试更深入地挖掘。我从来没有将控制台日志附加到代码中......

Answer 1

尝试删除每个“可拖动”元素上的 margin-left。问题就会消失。似乎 Jquery UI 中可能存在一个错误，它将边距视为元素的一部分。

要考虑删除的边距，您可以调整已应用于元素的“左”值。

（编辑：它似乎是this bug 在这里工作。至少我认为这是一个错误，该票的作者也是如此；至少它是图书馆的行为方式不那么直观不处理有边距的情况）

Answer 2

在我看来这是一个加载问题。在关联元素进入 DOM 之前调用您的拖放脚本。

尝试将拖放代码放在 $(document).ready() 部分。代码将等到整个页面加载完毕后才被调用，并且您将确保所有元素都存在。

控制台日志为：console.log(STUFF)

Answer 3

所有盒子都可以在这里放置。只是，您必须将可拖动对象放在可拖放对象的右侧。然后触发。

一定是定位问题。

由于它在小提琴上完美运行，我无法测试解决方案，但如果您以任何方式移动 dropable，请尝试将该操作移动到声明它们可拖放/可拖放的行的“另一侧”。

在任何情况下，draggable/dropable 都认为盒子在它们不在的地方。反正就是这个样子。

Answer 4

Jquery droppable 的工作原理是获取框的左上角和右上角，然后将宽度和高度相加得到一个矩形。

在css中页面左上角为0,0，jquery取leftOffset和topOffset。

现在您的问题在于 CSS 的这些行：

.custom #lime{background: #77FF5C; float: left; width: 20px; height: 20px; margin-left: 50px; display: none; }

margin-left:50px 在您摔倒时会影响您的视觉辅助。把它拿出来，你会看到 jQuery 在进行盒子碰撞检查时看到了什么。

为了调试，在 Chrome（我相信是 IE8+）的检查器/开发工具中，您可以单击 HTML 树视图中的一个元素，它将突出显示页面上的元素——如果您在您的网站上执行此操作可拖动的框看起来像（x = 框的颜色）：

[_______xx]

代替：

[xx]