Hi, I'm working on a project using jQuery draggable (I'm using jquery 1.2.1 and jquery UI for draggable/droppable), and I'm noticing a problem that occurs only in Firefox (tested with Firefox 2.0.0.3 on MacOS 10.4 and Firefox 2.0.0.3 on Windows XP SP2). I have a number of draggable elements inside a div with overflow:scroll (so that the user can scroll and choose which elements to drag and drop). But when this happens, the element being dragged falls behind certain other divs and a flash element on the webpage. It seems like flash elements and the divs that have been set up using jQuery always float over and cover the draggable elements. I have set the z-index for the draggable elements to 1000, and I've also tried using zIndex : 1000 in the .draggable call ... doesn't seem to help. I also set the wmode=transparent param in the flash element; didn't help. Everything works fine in Safari 2, IE 6/7, and even Opera - the dragged element doesn't get covered up and always stays on top. The problem only seems to occur in Firefox. If I set the overflow attribute to visible, then the dragging works fine in Firefox, and the draggable elements don't get covered up. Setting overflow:visible isn't really a viable option for me though ... unless someone can suggest a way to replicate the overflow:scroll functionality?
I found this example that more or less displays the problem that I'm talking about: http://jonathanleighton.com/assets/2007/7/12/flash-z-index.html Setting the overflow to hidden makes the element get covered up; setting the overflow to visible brings the element to the front. The author of the example page hasn't provided a workaround either ... thanks in advance, Pei
