Draggable elements in div show up behind drop zone when div is scrollable, need them to show in front

Question

EDIT: I was able to figure something out, this fiddle reflects the change: http://jsfiddle.net/Kw27r/5/

I have a div (#gallery) which contains a set of draggable tiles. They are to be dropped into another div (#imageDropContainer) which contains several drop zones. Here is the issue I am having:

When #gallery's overflow-y property is set to visible, everything works fine. However, #gallery must have a fixed height, meaning it can only display 2 rows of tiles at once. So if the overflow is set to visible, you can't see anything in the 3rd row because it is "hiding" behind the #imageDropContainer which is immediately below #gallery. If you set the div to scrollable, then you can scroll to the other elements in the div but the tiles are "hidden" behind the drop zone while you are dragging them.

How can I allow the div to remain scrollable, but have draggable tiles not hide behind the drop zone while they are being dragged? in other words, How can I circumvent the standard behavior of the 'Overflow' property?

Here is a fiddle to demonstrate:

http://jsfiddle.net/Kw27r/4/

What I have considered "pertinant" JS and CSS is shown in the fiddle. If I have overlooked something, other background CSS and JS can be viewed from the external resources tab.

Thanks for reading!

Answer 1

Well, thanks for looking over this guys, but in doing some further research I found out about the appendTo property of draggable (courtesy of this SO: Jquery draggable: scrolling in droppable using helper 'clone' and appendTo) , and now everything works. I can simply append my draggable helper to a different div that is visibly on top of my drag zone. Here is my modified draggable code. This also includes an addition which prevents the scrollbar from jumping back to the top when a row after the 2nd row is dragged:

jQuery(".galleryTile").draggable({revert: true,
            helper: "clone",
            appendTo:'#templateEditorContainer', //apend it to another div!!
            start: function(e, ui)
            {
                $(ui.helper).addClass("ui-draggable-helper");
                latestScroll=$('#gallery').scrollTop(); //keep track of 
                                                        //where the scrollbar was
            },
            drag: function() {
                jQuery('.galleryTile').css('z-index', '0');
                jQuery('.ui-draggable-helper').css('z-index', '1000');
                jQuery(this).css('z-index', '1000');
                  $('#gallery').scrollTop(latestScroll); //revert the scrollbar to the 
                                                         //correct position instead 
                                                         // of the top
            },
            stop: function() {
                jQuery(this).css('z-index', '0');
                jQuery('.ui-draggable-helper').removeClass('ui-draggable-helper');
            }
        });
        jQuery(".galleryTile").mousedown(prepTileForDragging);

Answer 2

Well, I see you answered yourself, but your question puzzled me and I wanted to explore it (and I did not want my "research" to go to waste).

Your original solution would never work as per overflow definition.

I have made a simple demo which should help you understand the issue. You'll have to put what you are dragging outside the overflow:scroll box. Exactly like in your own answer.

Overflow:visible allow a box content to flow out of it. So you can break your box and go anywhere on the page.

Overflow:hidden disallow a box content to flow out of it. What doesn't fit inside the visible area will go hidden.

Overflow:scroll also disallow a box content to flow out. However, the content will remain available with the scrollbar (in the demo, the draggable image will move the scrollbar, it's the interresting effect).

But try moving the image in the demo, you'll see what I mean.