z-index issue in jqueryui

Question

I am using jquery UI for drag and drop some components in a calendar which I am working on. To set the highest z-index of whichever element being dragged I used stack:"div", but this has a side effect as it hides dropdown which opens after clicking a button inside the component. stack:"div", does not set higher z-index for this drop-down that's why the dropdown is hiding behind another component which has higher z-index than the drop-down. This is what I want:

This is what I have right now:

Below image shows this problem more clearly:

code structure:

    <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>

The problem is how can I show the dropdown always on top after clicking the add more button.

Answer 1

I am able to solve this issue by removing stack:"div" and by adding this code:

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