Topic: Draggables and overlapping divs...

hi all..

I'm trying to drag images from one div to another to arrange pictures in a photo album. Technically there's no problem, I can drag the image out of the source div no problem and even releasing on the target div is registered just fine. The problem is visually the image seems to slide under the target div as you can see in this example:

I've tried setting the z-index of both the source/target divs and the draggable element to varying heights but to no avail.

Re: Draggables and overlapping divs...

That's very strange. Z-Index should definitely fix this. Can you post some code?

Might be worth using Firebug to check the z-index values of the elements as the drag occurs ... they might be changed by the Drag/Drop script and overriding CSS properties.

Toby Hede
FiniteStateMachine - Software Development for Social Networks

Re: Draggables and overlapping divs...

That's what I thought.. I'll have another go and post the results when I know more.

Re: Draggables and overlapping divs...

I tried again with different z-index values but to no avail. I checked firebug, the z-indexes get set just fine and work as expected for the container and background divs themselves just not for the draggable element.

This is how the element itself is called

  = draggable_element( "photo#{}", :zindex => 10 )

I gave the background div z-index 1 and the source/target divs z-index 2. I know the z-indexes work because if I reverse those two the background overlaps the source & target.

The one thing I can't seem to check with Firebug is the z-index of the draggable element that's created.