为什么只有4个盒子中的一个可以丢弃，如果他们都应该是？ [英] Why is only 1 of 4 boxes droppable, if they are all supposed to be?

问题描述

在我的沙箱网站，如果您加载它，几秒钟后会显示一个下拉菜单，其中包含确认按钮。如果您单击确认按钮，背景图像更改和一些新的框加载。新加载页面上的四个小框是可拖动的，白框内的四个框应该是可放置的，但只有一个。

At my sandbox site, if you load it a drop down menu appears after a few seconds with "confirm" button. If you click that "confirm" button, the background image changes and some new boxes load. The four small boxes on the newly loaded page are draggable, and the 4 boxes inside the white box are supposed to be droppable, but only one is.

新更新 - 以下是整个代码的工作小提琴。点击提交小提琴。新的盒子加载后，它们都是可拖动和可拖放的。 整个代码的工作小提示

New Update- Here is a working fiddle of the whole code. Click "submit" on the fiddle. After the new boxes load and they are all draggable and droppable. Working fiddle of whole code

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

However, on my sandbox site only one box (the red box in the big white box on page 2) is actually droppable.

重要分类< - 如果我改变红色框上的CSS位置，它不再是由于某种原因可以丢弃。例如，我换了红色和柠檬绿盒子上的左：位置，它从红色框中删除了droppable功能，所以没有一个框是可放置的。

IMPORTANT CLUE -- if I change the CSS position on the red box, it's no longer droppable for some reason. For example, I swapped the left: position on the red and lime green boxes, and it took away the droppable functionality from the red box so that none of the boxes were droppable.

另一个新的更新我在非wordpress网站上重现了这个问题，所以我们知道这不是一个wordpress问题或wordpress插件问题非wordpress网站。

Another new update I recreated the problem on a non-wordpress site, so we know it's not a wordpress issue or wordpress plugin issue non-wordpress site. Except on this site, it's not the red box on the second page that's droppable, only the dark blue box.

另一个新的更新第一个页面上的红色方框人回应这个线程已经发现，如果红色框从dom中删除，浅蓝色的一个成为可撤销...

Another new update The first person to respond to this thread has discovered that if the red box is removed from the dom, the light blue one becomes droppable...

有什么想法如何解决这个问题？此外，你能告诉我如何添加console.log到这个代码，以便我可以尝试深入。我从未将控制台日志附加到代码...

Any idea how to fix this? Also, can you show me how I would add console.log to this code so that I can try to dig deeper. I've never attached console log to code...

推荐答案

尝试删除每个可拖动元素。问题会消失。看起来在Jquery UI中可能有一个错误，将该边缘视为元素的一部分。

Try removing margin-left on each of your "draggable" elements. The problem will go away. It appears that there might be a bug in Jquery UI that treats the margin as if it were part of the element.

要考虑已删除的边缘，您可以调整您已经应用到元素的左值。

To account for the removed margin, you can adjust the "left" values you have already applied to the elements.

（编辑：它似乎是这个bug在这里工作至少我认为这是一个错误，所以将是那张票的作者;至少它的图书馆行为在一个不那么直观通过不处理具有边距的情况下的方式）

( it appears to be this bug at work here. At least I'd argue it's a bug and so would the author of that ticket; at minimum it's the library behaving in a less-than-intuitive way by not handling for the case with margins)

这篇关于为什么只有4个盒子中的一个可以丢弃，如果他们都应该是？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！