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

Tags: css,jquery-ui,z-index,draggable,droppable

Problem :

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:


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!

Solution :

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)
                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');

    CSS Howto..

    How do I set dynamic width to a block element?

    How to make Google Preview Button display in a CSS pop-up?

    How do I make template colors update when I choose them from a list or radio buttons? [closed]

    how to change css after some seconds continously?

    How can I change the color of the last letter in an element?

    how to make sure that that grid layout row adjusts the height automatically as per content

    How to style a subset of some text in HTML/CSS?

    How to set a CSS settings only to the td of an external table but not to the internal table?

    How do I show my existing rails app differently on Facebook canvas

    How to get page-header and nav-pills to appear on the same line

    How can i use the visibility attribute in css to make my submenu appear and reappear?

    How to make a dropdown menu with CSS

    How to replace non-existing images with a default one in css?

    HTML5 contenteditable div: show placeholder only if div has 1 child

    How is Facebook's website front-end and it's right sidebar designed?

    How do I scroll d3 elements while keeping a portion of the svg in a fixed position?

    HTML/CSS current active menu does not show active

    How can we control the size of a special character?

    Jquery how to add :hover to css style sheet

    How to create a completely flexible piano keyboard with HTML and CSS

    How to call a CSS file from the right place

    How to add an icon to a button at the bottom right corner

    How to animate my element in my case?

    How to use the not selector correctly in CSS [duplicate]

    Getting an error message to show up inline of input

    How to remove CSS underline?

    How to debug CSS when using GWT

    ASP.Net MVC: How can I easily change the tab color of my navigation menu based on the tab that I'm on?

    How to make CSS animation happen the moment the website loads

    CSS: how to make margin: 0px auto work