javascript - 带有相关容器或固定面板的 Jquery 可拖放 Z-Index

Question

我在使用 Jquery Draggable 和 Droppable 时遇到问题，其中拖动项位于固定位置侧面板的后面。

父级可拖动#gallery 容器必须具有相对定位，因为我使用 Muuri 进行网格布局。

  #gallery { position: relative; width: 65%; z-index:1 }

侧面板有一个固定的位置，因此它可以像滑出面板一样工作。如果我在侧面板上放置一个 z-index，它会按原样出现在容器上方，但拖动项总是出现在它后面，而不是尊重 ui-拖动项的较高 z-index。如果我删除侧面板上的 z-index，那么侧面板显然会在容器的后面，而它应该在顶部。

#trash { position: fixed; z-index: 2; width: 200px; }

我在CSS中设置了拖动项的z-index。

.ui-draggable-dragging {z-index:4; }

我尝试将克隆附加到文档并设置 zIndex:

$( "li", $gallery ).draggable({
      cancel: "a.ui-icon", 
      revert: "invalid", 
      containment: "document",
      helper: "clone",
      cursor: "move",
      zIndex: 5
    });

• #gallery 容器需要是相对的并且是 z-index 1
• #trash 侧面板位置固定，z-index 为 2
• 拖动项应处于最高 z-index:3+

我正在使用标准的 Droppable 示例之一来简化示例。我已从示例中删除了 Muuri 以排除这种情况。

示例:https://plnkr.co/edit/0SZ5Mjanh6sowC2uVnjS

Answer 1

很容易解决，只更新一行代码。请更新您的代码添加新的 CSS 行

#gallery,
#trash  { z-index: inherit !important; }

参见演示:https://plnkr.co/edit/Y3SwKJj0RZswlVKOnVhW?p=preview