Droppable: droppable region is offset by draggables margin

Div A is draggable and Div B is droppable. If you apply a margin to the draggable Div A, the region into which you can drop it is moved down and to the left by this margin. So if, for example, your droppable Div B is a gray box, if the margin on Div A is high enough, the actual droppable region completely misses the gray box. I would expect the droppable region to match up with Div B's boundaries, regardless of any margin applied to Div A.

For a live example, see: http://jsfiddle.net/crmGQ/2/

The top box (.empty) is supposed to be a droppable for the lower draggable (.color) box. Because of .color's 12 pixel margin, the droppable region is shifted far enough that you can almost cover the droppable in the top left corner with the draggable without actually triggering the drop event. This problem gets much worse if you increase .color's margin to something like 48px. The problem completely goes away if you set the margin to 0.

I hope this makes sense. Let me know if anything needs clarification or more examples. This is reproducible in Chrome 8, Firefox 3.6, and IE 9, using jQuery 1.4.4 and UI 1.8.7.