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

将 #trash 的 z-index 更改为 -1

#trash {
    width: 200px;
    min-height: 18em;
    padding: 1%;
    position: fixed;
    background: #e4e4e4;
    right: 0;
    top: 0;
    z-index: -1;
}

Answer 2

问题出在父元素上，他在 thresh 下，一个简单的解决方法是在拖动元素时更改父元素 z-index。为下面的代码更改您的可拖动功能，应该可以正常工作。

    // Let the gallery items be draggable
    $( "li", $gallery ).draggable({
      cancel: "a.ui-icon", // clicking an icon won't initiate dragging
      revert: "invalid", // when not dropped, the item will revert back to its initial position
      containment: "document",
      helper: "clone",
      cursor: "move",
      zIndex: 5,
      drag:function () {
        $(this).parent().css('z-index', '9999');
        $(this).removeClass('droped');
      },
      // removing the CSS classes once dragging is over.
      stop:function () {
        $(this).parent().css('z-index', '1');
        $(this).addClass('droped');
      },
    });

Answer 3

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

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

查看演示：https://plnkr.co/edit/Y3SwKJj0RZswlVKOnVhW?p=preview

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

Jquery Draggable and Droppable Z-Index with Relative Container or Fixed Panel

javascript

css

jquery

droppable

draggable