1

我需要做的：我需要并排创建两个 div。在每个 div 中，我需要有绝对定位的图像。我还需要将这些图像从一个 div 拖到另一个。

我的问题是拖动的图像消失在另一个 div 后面。这是一个jsFiddle显示问题，因为黄色 div 消失在蓝色容器后面。

我的问题：有没有办法让蓝色容器识别黄色 div 的 z-index （绝对位置），而黄色 div 将红色容器作为其锚点？

一些背景：我需要实现这一点，因为我想从一个列表中拖动图像，然后将它们放入另一个可排序的列表中。我想通过 jQuery UI 的可拖动、可放置和可排序方法来实现这一点。到目前为止，一切都很简单和标准。

但是，两个图像列表都必须是可滑动的。就其本身而言，这可以通过 jQuery UI 的滑块方法相对轻松地实现。但是，为了使图像滑动，我需要使用绝对定位（图像列表的实际滑动是通过改变绝对位置来实现的）。因此，我无法绕过jsFiddle中所示的相对和绝对定位。

一如既往，非常感谢任何帮助！

4

1 回答 1

3

您可以：

  1. 仅将 z-index 应用于容器内的元素。（并且确保不要将 z-index 应用于容器，否则它们将设置自己的堆叠上下文，并且应用于其中任何内容的 z-index 仅与新上下文相关。）

  2. 从 2 个容器中删除 position:relative 声明。如果没有任何 z-index 声明，定位元素将出现在非定位元素的前面。

可以在这里找到关于堆叠上下文的一个很好的解释：http: //timkadlec.com/2008/01/detailed-look-at-stacking-in-css/

更新
您可以尝试 jQuery/UI 可拖动的 helper:clone 选项。

由于它“克隆”了您要拖动的项目（“用于拖动显示”），因此它不受与原始容器相同的容器的约束。但是您需要处理这样一个事实，即在拖动“克隆”项目时该项目仍出现在其原始位置。

你可以使用 draggable 的 start 和 stop 事件让原来的不可见和可见：

$('.myDiv')
    .draggable({
        helper: 'clone',
        start: function () {
            $(this).css('visibility', 'hidden');
        },
        stop: function () {
            $(this).css('visibility', 'visible');
        }
    })

...但是，正如 Andrius 建议的那样，您需要处理物品掉落时会发生的情况。为此，我建议您查看这篇文章：克隆节点拖动

祝你好运。

于 2012-05-14T10:07:55.897 回答