jQuery Sortable + Droppable z-index problem

Question

I am having a probelm with the z-index of my sortable object not being above my droppable.

• If you visit http://clareshilland.unknowndomain.co.uk/.
• Press Ctrl + L to bring up the login screen.
• Enter the username clare and the password shilland.
• It will then load in the admin bar and if you click manage gallery.
• A pop down thumbnail view will appear with all the photos from that gallery.

The issue is that when you drag the 'polaroids' from the grid to the delete area they are under the delete area.

I tried putting the delete area inside the same div as the grid but it makes no difference, I just don't know what to do at this point so any help would be a massive help!

Answer 1

Try the following options for your .sortable() :

{
  helper: 'clone',
  appendTo: 'body',
  zIndex: 10000 //or greater than any other relative/absolute/fixed elements and droppables
}

Answer 2

Actually, it appears the problem is a combination of z-index and the overflow (I removed it). If you change your gallery view CSS to this, it works

#galleryView {
 background: white;
 bottom: 85px;
 left: 0;
 position: fixed;
 right: 0;
 top: 147px;
 z-index: 1000;
}

You might want to have additional gallery images that scroll off to the right instead of down.

Answer 3

I dont think its a z-index problem, i think the problem is that when you move the li over the delete area, its being cut off because its outside its parent ol. I would try moving the li to an ol thats inside the delete area as soon as you mouseover (use the droppable.over event,) that might allow it to display properly.