如果它们都应该是，为什么只有 4 个盒子中的 1 个可以丢弃? [英] 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 位置，由于某种原因它不再可放置.例如，我在红色和浅绿色的盒子上交换了 left: 位置，它从红色盒子中移除了可放置的功能，因此没有一个盒子是可放置的.

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 中移除红色盒子，浅蓝色盒子就会变成 droppable...

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...

推荐答案

尝试删除每个可拖动"元素上的 margin-left.问题就会消失.似乎 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.

(它似乎是 这个错误在这里工作.至少我会辩称这是一个错误，该票的作者也是如此；至少它是图书馆的行为方式不够直观，没有处理有边距的情况)

( 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 个盒子中的 1 个可以丢弃?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！