Пользовательский интерфейс jQuery: пропадающий фон?

Я пытаюсь создать trashcan, где после того, как вы поместили некоторые элементы там, вы могли бы просто открыть его и вытащить из него лишний элемент, сбросив его за пределы корзины.

Как я установил это, у моего веб-приложения есть значок trashcan, где я бросаю элементы, а щелчок на мусорном ящике открывает коробку с разбитыми деталями и исчезает на черном прозрачном фоне, который скрывает все остальное, поэтому вы просто фокусируетесь в коробке корзины.

Код по существу

<div id="background"></div>
<div id="trashcanContainer">
   <ul id="items">
     <li>item1</li>
     <li>item2</li>
   </ul>
</div>

Фоновый CSS установлен на фиксированное положение и 100% ширину и высоту, и он устанавливается как droppable. Проблема в том, что когда я перетаскиваю что-то из корзины и отбрасываю его на задний план, он удаляется, даже если я удаляю его поверх корзины. В основном jQuery каким-то образом не понимает, что trashcanContainer div находится поверх фонового div (и, следовательно, не является частью droppable), даже если я определяю z-индекс выше фона.

Есть ли способ сделать это?