jQuery UI:可投放背景? [英] jQuery UI: droppable background?

问题描述

我正在尝试创建一个垃圾桶，在其中放置了一些物品之后，只需将其打开，然后将其丢弃到垃圾桶中即可，将所有垃圾桶从其中拖出.

I'm trying create a trashcan where after you've put some items there, you could simply open it and drag any trashed item out of it by dropping it outside the trashcan.

我设置的方式是，我的Web应用程序有一个垃圾桶图标，我可以在其中放置物品，然后单击垃圾桶会打开一个装有垃圾物品的盒子，并在黑色透明背景中淡入淡出，使其他所有物体模糊不清，因此您只需集中精力在垃圾箱上.

The way I've set this, is my web app has a trashcan icon where I drop the items and clicking the trashcan opens a box with the trashed items and fades in a black transparent background that obscures everything else so you just focus on the trashcan box.

代码本质上是

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

背景CSS设置为固定位置，宽度和高度为100％，并且设置为可放置.问题是，当我从垃圾桶中拖出一些东西并将其放到背景上时，即使我将其放在垃圾桶上也将其删除.基本上，即使我定义的z-index高于背景，jQuery也不以某种方式无法理解rashcanContainer div位于背景div的顶部(因此不是可放置部分的一部分).

The background CSS is set to fixed position and 100% width and height and it is set as a droppable. The problem is that when I drag something from the trashcan and drop it on the background, it gets removed even if I drop it on top of the trashcan. Basically jQuery somehow doesn't understand that the trashcanContainer div is on top of the background div (and thus not part of the droppable) even if I define a z-index higher than the background.

有什么办法可以使这项工作完成?

Is there any way I can make this work?

推荐答案

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

Make sure #trashcanContainer is absolutely positioned with either position: absolute or position: fixed, otherwise z-index will have no effect.

这篇关于jQuery UI:可投放背景?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！