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

在我的沙箱网站上 ，如果你加载它，几秒后会出现一个下拉菜单，上面有“确认”按钮。 如果单击“确认”按钮，背景图像将更改并加载一些新框。 新加载的页面上的四个小框是可拖动的，白框内的4个框应该是可放置的，但只有一个是可放置的。

新更新 –这是整个代码的工作小提琴。 点击小提琴上的“提交”。 新箱子加载后，它们都是可拖动和可拖放的。 整个代码的工作小提琴

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

重要的CLUE – 如果我更改红色框上的CSS位置，由于某种原因它不再可以删除。 例如，我在红色和青柠绿色框上交换左侧：位置，它从红色框中取消了可放置的function，因此没有任何框可以放置。

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

另一个新的更新第一个响应这个线程的人发现，如果从dom中移除红色框，则浅蓝色框会变得可以放置……

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

Answer 1

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

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

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

Answer 2

在我看来这是一个装载问题。 在相关元素位于DOM之前，将调用您的drap / drop脚本。

尝试将拖放代码放在$（document）.ready（）部分中。 代码将一直等到整个页面被加载以进行调用，并且您将确保所有元素都存在。

控制台日志是：console.log（ STUFF ）

Answer 3

所有的盒子都可以放在这里。 只有，您必须将可拖动的拖放到可丢弃的右侧。 然后它触发。

它必定是某种定位问题。

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

在任何情况下，可拖动/可丢弃都认为盒子不在某个地方。 无论如何，这就是它的样子。

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]