Jquery Dragable и Droppable Z-Index с относительным контейнером или фиксированной панелью

Question

У меня проблема с Jquery Draggable и Droppable, когда элемент перетаскивания находится за боковой панелью с фиксированным положением.

родительский перетаскиваемый #Контейнер галереи должен иметь относительное расположение, потому что я использую Muuri для компоновки сетки.

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

Боковая панель имеет фиксированное положение, так что она может действовать как выдвижная панель.Если я добавлю z-индекс на боковую панель, он появится над контейнером, как и должно быть, но элемент перетаскивания всегда появляется за ним, а не по более высокому z-индексу перетаскиваемого элемента.Если я удаляю z-индекс на боковой панели, то боковая панель, очевидно, идет за контейнером, когда она должна быть сверху.

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

Я устанавливаю z-index элемента перетаскивания в CSS.

.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-индекс 2
• Элемент перетаскивания должен иметь самый высокий z-индекс: 3 +

Я использую одинстандартных Droppable примеров, чтобы упростить пример.Я удалил Муури из примера, чтобы исключить это.

Пример: https://plnkr.co/edit/0SZ5Mjanh6sowC2uVnjS

Answer 1

Проблема в родительском элементе, он находится под 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 2

Это легко решить, обновить только одну строку кода.пожалуйста, обновите ваш код и добавьте новую строку CSS

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

См. демонстрацию: https://plnkr.co/edit/Y3SwKJj0RZswlVKOnVhW?p=preview

Answer 3

изменено z-index из #trash на -1

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