Javascript 具有相对容器或固定面板的Jquery可拖放Z索引

我在Jquery中遇到了一个问题，即当拖动项位于固定位置的侧面板后面时，Jquery是可拖动和可拖放的

父draggable#gallery容器必须具有相对位置，因为我使用Muuri进行网格布局

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

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

#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索引1
• #垃圾箱侧板为固定位置，z指数为2
• 拖动项应位于最高的z索引：3+

我正在使用一个标准的可拖放示例来简化示例。我已经从示例中删除了Muuri以排除这种可能性

---

示例：

将

#trash

的

z-index

更改为

-1

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

---

问题是父元素，它位于阈值下，一个简单的解决方法是在拖动该元素时更改父元素

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');
      },
    });

---

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

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

---

请参阅演示：

这不起作用。垃圾箱侧面板必须位于#库主容器上方。我明白你的意思，但是，这不起作用，因为这会使整个#库覆盖在侧面板顶部。侧面板总是需要在库的上方。我知道，我知道，但我认为这不是问题：有没有办法将克隆附加到不同的父元素？我认为这就是“containment”属性将克隆分配给根文档的方法。这是一种方法，但我认为您已经解决了问题。嗨，这不起作用。如果缩小窗口，使侧面板“垃圾桶”覆盖容器“画廊”，则在拖动拖动项目时，容器将抖动和结巴。实际上有两个问题。重现问题的步骤：1）最小化窗口，以便#垃圾结束#画廊。2） 把鼠标放在垃圾桶上就行了。画廊出现在垃圾桶上方。对于口吃，2）在垃圾箱上拖动一个项目，但不要释放。3） 在按住鼠标左键的同时，将光标与拖动项一起在重叠区域上下移动。垃圾箱和画廊来回闪烁z索引。在FF和Chrome最新版本中进行了测试。请再次查看我的Anyes，更改为inherit使其能够正常工作而不会结巴。谢谢