問題描述

在我的 沙盒網(wǎng)站，如果您加載它，幾秒鐘后會(huì)出現(xiàn)一個(gè)下拉菜單，并帶有確認(rèn)"按鈕.如果您單擊該確認(rèn)"按鈕，則背景圖像會(huì)更改并加載一些新框.新加載的頁面上的四個(gè)小框是可拖動(dòng)的，而白框內(nèi)的四個(gè)小框本應(yīng)是可拖放的，但只有一個(gè)是可拖放的.

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.

新更新-這是整個(gè)代碼的工作小提琴.單擊小提琴上的提交".新框加載后，它們都是可拖放的.整個(gè)代碼的工作小提琴

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

但是，在我的沙盒網(wǎng)站上，實(shí)際上只有一個(gè)盒子(第 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: 位置，它從紅色盒子中移除了可放置的功能，因此沒有一個(gè)盒子是可放置的.

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.

另一個(gè)新的更新我在一個(gè)非 wordpress 網(wǎng)站上重現(xiàn)了這個(gè)問題，所以我們知道這不是 wordpress 問題或 wordpress 插件問題 非 wordpress 網(wǎng)站.除了在這個(gè)網(wǎng)站上，不是第二頁上的紅色框是可放置的，只有深藍(lán)色的框.

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.

另一個(gè)新的更新第一個(gè)回復(fù)這個(gè)帖子的人發(fā)現(xiàn)，如果從 dom 中移除紅色盒子，淺藍(lán)色盒子就會(huì)變成 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...

知道如何解決這個(gè)問題嗎?另外，您能否告訴我如何將 console.log 添加到此代碼中，以便我可以嘗試更深入地挖掘.我從來沒有將控制臺(tái)日志附加到代碼中......

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

推薦答案

嘗試刪除每個(gè)可拖動(dòng)"元素上的 margin-left.問題就會(huì)消失.似乎 Jquery UI 中可能存在一個(gè)錯(cuò)誤，它將邊距視為元素的一部分.

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.

要考慮移除的邊距，您可以調(diào)整已應(yīng)用于元素的左"值.

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

(它似乎是 這個(gè)錯(cuò)誤在這里工作.至少我會(huì)辯稱這是一個(gè)錯(cuò)誤，該票的作者也是如此；至少它是圖書館的行為方式不夠直觀，沒有處理有邊距的情況)

( 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)

這篇關(guān)于如果它們都應(yīng)該是，為什么只有 4 個(gè)盒子中的 1 個(gè)可以丟棄?的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！