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

将z-index中的#trash更改为-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

3 个答案: