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

However, on my sandbox site only one box (the red box in the big white box on page 2)开发者_JAVA技巧 is actually 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.

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.

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

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

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.

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

Looks to me like it's a loading issue. Your drap/drop scripts are being called before the associated elements are in the DOM.

Try putting the code for drag/drop in the $(document).ready() section. The code will wait until the whole page is loaded to be called, and you will be sure all the elements are present when it is.

console log is: console.log(STUFF)

All boxes are dropable here. Only, you have to drop the dragable just to the right of the dropable. Then it triggers.

It must be some kind of positioning issue.

Since it works flawlessly on fiddle I cannot test a solution, but if you move the dropables in any way, try moving that action to "the other side" of the lines that declare them dragble/dropable.

In any case, dragable/dropable thinks the boxes are somewhere they are not. That is what it looks like anyway.

Jquery droppable works by taking the upper left and upper right most point of the box, then adding the width and height to get a rectangle.

In css the top left of the page is 0,0 and jquery takes the leftOffset and topOffset.

Now your problem lies in these lines of your CSS:

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

That margin-left:50px throws off your visual aid when you are dropping. Take that out and you will see what jQuery see's when it does the box collision check.

For debugging, in Chrome (and IE8+ I believe) in the inspector/dev tools you can click on an element in the HTML tree view and it will highlight the element on the page -- if you do this on your sites the draggable boxes look like (x = color of box):

[_______xx]

instead of:

[xx]