jQuery UI：可放置的背景？

Question

我正在尝试创建一个垃圾桶，在您将一些物品放在那里之后，您只需打开它，然后将任何已丢弃的物品拖放到垃圾桶外即可将其拖出。

我设置的方式是，我的网络应用程序有一个垃圾桶图标，我可以在其中放置项目，然后单击垃圾桶会打开一个包含已删除项目的框，并淡入黑色透明背景，从而掩盖其他所有内容，因此您只需专注在垃圾桶上。

代码本质上是

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

背景 CSS 设置为固定位置和 100% 宽度和高度，并设置为可放置。问题是，当我从垃圾桶中拖出一些东西并将其放在背景上时，即使我将它放在垃圾桶顶部，它也会被删除。基本上，即使我定义了一个高于背景的 z-index，jQuery 也不知道垃圾箱容器 div 位于背景 div 的顶部（因此不是可放置的一部分）。

我有什么办法可以完成这项工作吗？

Answer 1

确保#trashcanContainer 与position: absolute 或position: fixed 绝对定位，否则z-index 将无效。