Droppable: droppable region is offset by draggables margin
|Reported by:||mlms13||Owned by:||mikesherov|
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.
Change History (6)
comment:3 Changed 4 years ago by mikesherov
- Summary changed from Droppable region is offset by draggable item's margin to Draggable: Droppable region is offset by draggable item's margin
comment:4 Changed 3 years ago by mikesherov
- Component changed from ui.draggable to ui.droppable
- Milestone changed from 2.0.0 to 1.11.1
- Owner set to mikesherov
- Status changed from open to assigned
- Summary changed from Draggable: Droppable region is offset by draggable item's margin to Droppable: droppable region is offset by draggables margin
comment:5 Changed 3 years ago by Mike Sherov
- Resolution set to fixed
- Status changed from assigned to closed