Opened 9 years ago

Closed 9 years ago

Last modified 9 years ago

#8872 closed bug (notabug)

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:

Change History (4)

comment:1 Changed 9 years ago by Scott González

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.

comment:2 Changed 9 years ago by denispeplin

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.

comment:3 Changed 9 years ago by Scott González

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.

comment:4 Changed 9 years ago by denispeplin

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!

Note: See TracTickets for help on using tickets.