jQuery Sortable + Droppable проблема z-индекса

Question

У меня возникла проблема с z-индексом моего сортируемого объекта, который не был выше моей капли.

• Если вы посетите http://clareshilland.unknowndomain.co.uk/.
• Нажмите Ctrl + L, чтобы открыть экран входа в систему.
• Введите имя пользователя clare и пароль shilland.
• Затем он будет загружен в админ-панели и, если вы нажмете manage gallery.
• Появится всплывающее окно со всеми фотографиями из этой галереи.

Проблема в том, что при перетаскивании «поляроидов» из сетки в область удаления они находятся под областью удаления.

Я пытался поместить область удаления в тот же элемент div, что и сетка, но это не имеет значения, я просто не знаю, что делать в этой точке, поэтому любая помощь будет большой помощью!

Answer 1

Попробуйте следующие варианты для .sortable():

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

Answer 2

На самом деле, похоже, проблема в сочетании z-индекса и переполнения (я его убрал). Если вы измените CSS-представление вашей галереи на это, оно будет работать

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

Возможно, вам понадобятся дополнительные изображения галереи, которые прокручиваются вправо, а не вниз.

Answer 3

Я не думаю, что это проблема z-index, я думаю, проблема в том, что когда вы перемещаете li над областью удаления, он обрезается, потому что находится вне родительского ol. Я бы попытался переместить li в ol внутри области удаления, как только вы наведете указатель мыши (используйте событие droppable.over), что может позволить его правильному отображению.