0

I'm having a problem with jqueryUI sortable and the overflow property in a page i'm working on - i've put a version of it on my public dropbox:
http://dl.dropbox.com/u/846812/stage_edit/stage_edit.html

If you grab one of the blue boxes in the right-hand-side container (pick it up by the grey bar) you can drag it over to the left (or the right) and it stays visible. However if you grab one of the boxes from the left and drag it out it's hidden behind the right hand side, or at least you can't see it once it crosses over. Also, the left hand container (#droppable-stage) expands along the x to keep the box inside, even though it's "under" the right hand side (#droppable-resource-list).

It is there, because you can see the grey box showing where it will appear, and when you drop it then it appears in the right hand side. It's just when it's in its drag state that you can't see it.

I can't work out why this is happening, particularly why it would be different for the right versus the left. I don't know if the problem is with css or with the jquery-ui draggable/sortable javascript. I've tried fixing it by mucking about with css to no avail - for example, if i put style="overflow:visible;" on #droppable-stage then the dragging works fine but i lose the y-overflow: that is, the resource divs (blue and green boxes) spill out of the bottom.

I tried setting overflow-x to visible and overflow-y to auto, thinking that would mean i could drag the blue boxes out the sides but still have a scrollbar on the left, but that didn't work: oddly, it seems to be the overflow-y property in particular that determines whether i can drag a box out the left or right, which doesn't make sense to me.

Any ideas, anyone?

Max Williams
  • 32,435
  • 31
  • 130
  • 197
  • does the order in which they are written in your html document affect this behavior? – Kristian Mar 14 '12 at 16:15
  • There is a scroll option to draggable, maybe you could start looking there ? http://docs.jquery.com/UI/Draggable#option-scroll ( from there : http://stackoverflow.com/questions/811037/jquery-draggable-and-overflow-issue#829131 ) – Bathz Mar 14 '12 at 16:17
  • @Kristian - no, just did an experiment and swapped div#resources-container and div#droppable-stage around. Still the same, just swapped round, ie the left hand one now works and the right hand one doesn't. So the problem is definitely with div#droppable-stage. – Max Williams Mar 15 '12 at 09:34
  • @Bathz good spot, thanks, but doesn't seem to help :/ – Max Williams Mar 15 '12 at 09:37

1 Answers1

0

its not that the container on the right has a higher z index or anything, its that the left container is set to contain the elements and scroll when necessary, via the overflow: auto; property.

When I changed the visible property overflow: visible; on div#droppable-stage, and then the grabbed droppables were no longer having an issue exiting the left column's space

Kristian
  • 21,204
  • 19
  • 101
  • 176
  • Thanks Kristian - as i said in my question, i tried that exact thing, and that fixes the dragging but also removes the vertical scrollbar, so that i can no longer access the resources down the bottom of the list (scroll the page down to see what i mean). It was that that led me to setting different values for overflow-x and overflow-y, which didn't help either. – Max Williams Mar 16 '12 at 11:47
  • the next logical step, imho, is then to mess with the actual display property of an actively grabbed item. When looking in the source, I see that it is position: absolute; why not try setting the grabbed item to have position: fixed; instead? – Kristian Mar 16 '12 at 21:54
  • Tried that by adding this style rule `.ui-sortable-helper { position: fixed !important;}` (the `ui-sortable-helper` class is added by jquery-ui when the item is being dragged) and that does make it visible in the rhs, but also makes it appear in a different position to the mouse, when you drag it around. Feels like we're getting closer though... – Max Williams Mar 19 '12 at 12:17
  • if the offset relative to the mouse is incorrect, you can probably adjust the margin of the actively-dragged item now to correct it. I'm not sure if thats considered a hacky solution though...drag and drop in itself is pretty hacky to deal with.. – Kristian Mar 19 '12 at 16:16