All geek questions in one place

JQuery Sortable + Droppable z-index task

I have a problem with the z-index of my sortable object not above my droppable.

  • If you visit http://clareshilland.unknowndomain.co.uk/ .
  • Press Ctrl + L to open the login screen.
  • Enter the clare and shilland password.
  • It will then be loaded into the admin panel and if you click manage gallery .
  • A list of thumbnail thumbnails appears with all the photos from this gallery.

The problem is that when you drag the "polaroids" from the grid to the delete area, they are under the delete area.

I tried to put the deletion area inside the same div as the grid, but that doesn't matter, I just don't know what to do at this moment, so any help would be a huge help!

+4
source share
3 answers

Try the following options for .sortable() :

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

Actually the problem is the combination of z-index and overflow (I deleted it). If you change your CSS gallery view 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 right and not down.

+1
source

I don’t think this is a problem with z-index, I think the problem is that when you move li over the delete area, it is cut off because it is outside its parent ol. I will try to move li to ol, which is inside the delete area, as soon as you hover over the mouse (use the droppable.over event), which could allow it to display correctly.

0
source

Source: https://habr.com/ru/post/1307291/

More articles:


All Articles