jqueryui 中的 z-index 问题

Question

我正在使用 jquery UI 在我正在处理的日历中拖放一些组件。为了设置被拖动的任何元素的最高 z-index，我使用 stack:"div", 但这有一个副作用，因为它隐藏了在单击组件内的按钮后打开的下拉菜单。 stack:"div", 没有为此下拉菜单设置更高的 z-index，这就是为什么下拉菜单隐藏在另一个 z-index 高于下拉菜单的组件后面的原因。这就是我要的：

这是我现在拥有的：

下图更清楚地说明了这个问题：

代码结构：

    <td data-date="28-7-2018" class="box ui-droppable not-past"><div class="drag-area ui-draggable ui-draggable-handle" style="position: relative; z-index: 1408; left: 0px; top: 0px;"><div class="component-wrapper event h-100" style="z-index: 194;">
    <div class="component" style="z-index: 569;">
        <a href="javascript:void(0)" class="d-block h-100">
            <img class="default-thumbnail-basic mx-auto h-100" src="http://localhost:8000/assets/images/recipe/vegetableburritobowls.jpg" alt="img1">
        </a>
        <div class="after-overlay" style="z-index: 570;">
            <div class="d-flex flex-wrapper align-items-center" style="z-index: 197;">
                <div class="d-flex" style="z-index: 571;">
                    <h6 class="text-capitalize video-name">eggs &amp; salad</h6>
                </div>
                <div class="d-flex ml-auto" style="z-index: 572;">
                    <div class="d-flex justify-content-end align-items-center" style="z-index: 573;">
                        <img src="http://localhost:8000/assets/images/icon/Like.svg" class="yoga-more-action likeunlike like">
                    </div>
                </div>
            </div>
            <div class="d-flex flex-wrapper align-items-center" style="z-index: 201;">
                <div class="d-flex" style="z-index: 574;">
                    <img src="http://localhost:8000/assets/images/menu-plan/cart.svg" class="yoga-more-action likeunlike like">
                </div>
                <div class="d-flex ml-auto" style="z-index: 575;">
                    <div class="d-flex justify-content-end align-items-center" style="z-index: 576;">
                        <img src="http://localhost:8000/assets/images/menu-plan/delete.svg" class="yoga-more-action likeunlike like">
                    </div>
                </div>
            </div>
        </div>
    </div>
            <div class="text-uppercase text-center add-more" style="z-index: 577;"><div class="dropdown h-100 show" style="z-index: 578;">
        <a class="dropdown-toggle d-block h-100" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">add more

        </a>
        <div class="dropdown-menu show" aria-labelledby="dropdownMenuButton" style="z-index: 1404; position: absolute; transform: translate3d(0px, 20px, 0px); top: 0px; left: 0px; will-change: transform;" x-placement="bottom-start">
            <a class="dropdown-item text-capitalize" href="javascript:void(0)" data-toggle="modal" data-target="#add-recipe">add recipe</a>
            <a class="dropdown-item text-capitalize" <a="" href="javascript:void(0)" data-toggle="modal" data-target="#add-ingredients">add ingredient</a>
            <a class="dropdown-item text-capitalize" href="#">add other</a>
<a class="dropdown-item text-capitalize" href="javascript:void(0)" data-toggle="modal" data-target="#add-leftover">add leftover</a>
        </div>
        </div>
</div></div></div></td>

问题是如何在单击“添加更多”按钮后始终在顶部显示下拉菜单。

Answer 1

我可以通过删除 stack:"div" 并添加以下代码来解决此问题：

$(document).on('myevent', function () {
        let x;
        $('.box .drag-area').draggable({
            revert: 'invalid',
            containment: ".drag-limit",
            scroll: false,
            start: function() {
              x = $(this).parent();
              $(this).css('z-index', 9999);
              if ($(this).find('.dropdown-menu').hasClass('show')){
                 $(this).find('.dropdown-menu').removeClass('show');
              }
            },
            stop: function () {
                $(this).draggable('option', 'revert', 'invalid');
                $(this).css('z-index', 'auto');
            },
        });

jqueryui 中的 z-index 问题

z-index issue in jqueryui

jquery

dom

jquery-ui

z-index