Search and Top Navigation
#8872 closed bug (notabug)
Opened November 30, 2012 07:43AM UTC
Closed November 30, 2012 10:08AM UTC
Last modified November 30, 2012 10:43AM UTC
Dragging moves droppables in Firefox and IE
| Reported by: | denispeplin | Owned by: | |
|---|---|---|---|
| Priority: | minor | Milestone: | 1.10.0 |
| Component: | ui.draggable | Version: | 1.9.2 |
| Keywords: | Cc: | ||
| Blocked by: | Blocking: |
Description
I encountered very strange behaviour of draggable/droppable in Firefox and IE (Opera, Chrome and rekonq works well).
When I try to drag'n'drop item, first time it works without problem, but when I try to drag it back, droppable tries to run away from draggable. Sometimes it tries to run away even for the first time.
I've tried to prepare reduced version:
http://jsbin.com/egajeg/3/edit
But not all issues I was able to reproduce with this reduced version (no troubles moving down in reduced version), so here is application, just to show what is wrong:
Attachments (0)
Change History (4)
Changed November 30, 2012 10:08AM UTC by comment:1
| resolution: | → notabug |
|---|---|
| status: | new → closed |
Changed November 30, 2012 10:20AM UTC by comment:2
Yes, I removed inline-block and now all works as expected. Thank you, I somehow missed this point.
Will try to find a better way to deal with width.
Changed November 30, 2012 10:36AM UTC by comment:3
As a workaround, you can use helper: "clone", appendTo: "body", but you'll need to add some extra logic to deal with the fact that you have a helper then. At least it will let you keep your CSS unchanged. I'm not sure why different browsers are handling overflow differently for inline-block.
Changed November 30, 2012 10:43AM UTC by comment:4
Found simple fix:
.ui-draggable-dragging {
display: inline-block;
}
So float the same for dragging draggable and droppaple in my case.
Thank again for help!
The only thing I see happening in your fiddle is that the elements inside the nested droppables won't move above the droppable's top and the droppable moves down as you move up. This is caused by the
display: inline-blockstyle that you've applied to your droppables. See http://jsbin.com/izayex/1/edit for a CSS only example of what's happening.