Skip to main content

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:

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:

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 scottgonzalez comment:1

resolution: → notabug
status: newclosed

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 thedisplay: inline-block style that you've applied to your droppables. See for a CSS only example of what's happening.

Changed November 30, 2012 10:20AM UTC by denispeplin 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 scottgonzalez 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 denispeplin 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!