jQuery UI Droppable with Bootstrap Navbar - How to drop a item inside Dropdown

Question

I am using jQuery UI droppable with Bootstrap Menu Navigation...

I want to drag a element item from "Menu Items" dropdown and drop inside "My Apps" Dropdown. The dropped element should go inside as "My Apps > ul > li" which will be hidden by default untill I click on My Apps link.

PS: My Apps is <li> item

Everything is working except it is dropping directly to "My Apps > li" element instead of "My Apps > ul > li".

I have tried with "$("#header-my-apps>li").appendTo("#header-my-apps ul.h-droped-list");" without luck :(

Pease help me out.

---

FIDDLE

---

jQuery

/* Menu Items Drag n Drop to create Short Cuts in Favorites Bar */
$(document).ready(function () {

    $('.rp-draggable li').not('li.pd-dropdown').each(function (i) {
        $(this).attr('uuid', +i);
    });

    $("#header-my-apps>li").appendTo("#header-my-apps ul.h-droped-list");

    /* jQuery Droppable */
    $(function () {
        $(".rp-draggable li").not('li.pd-dropdown').draggable({
            helper: "clone",
            placeholder: "ui-state-highlight",
        });
        $("#header-my-apps").droppable({
            activeClass: "ui-state-default",
            hoverClass: "ui-state-hover",
            accept: ":not(.ui-sortable-helper)",
            drop: function (event, ui) {
                $(this).find(".placeholder").hide();
                $(ui.draggable).addClass("addedToFav").clone().appendTo(this);
            }
        }).sortable({
            items: "li:not(.placeholder)",
            sort: function () {
                $(this).removeClass("ui-state-default");
            }
        });
    });


    /* Click Star Icon to Add to Drop Here Container */
    $('ul.rp-draggable li .fa-star-o').click(function () {
        var $target = $(this).closest("li"),
            $dropedList = $(".h-droped-list"),
            id = $target.attr("uuid");

        if (!$target.hasClass("addedToFav")) {
            $target.addClass("addedToFav").clone().appendTo($dropedList);
            $dropedList.find(".placeholder").hide();
            $('#header-my-apps>a').addClass("animated tada");
            setTimeout(function() {
                $("#header-my-apps>a").removeClass('animated tada');
            }, 1500);
        } else {
            $dropedList.find("li")
            .each(function (index, item) {
                var $elem = $(item);

                if ($elem.attr("uuid") == id) {
                    $elem.remove();
                    $target.removeClass("addedToFav");
                }

                if ($dropedList.children().length == 1) {
                    var $lastItem = $($dropedList.children()[0]);
                    $lastItem.hasClass("placeholder") && $lastItem.show();
                }
            })
        }

    });

    /* Click Close Icon to Remove from Drop Here Container */
    $("ul.h-droped-list").on('click', 'li .fa-star-o', function () {
        var $target = $(this).closest("li"),
            $catalog = $("#catalog ul"),
            id = $target.attr("uuid"),
            $dropList = $target.parent("ul");

        $target.remove();

        $catalog.find("li[uuid='"+id+"']").removeClass("addedToFav");

        if ($dropList.children().length == 1) {
            var $lastItem = $($dropList.children()[0]);
            $lastItem.hasClass("placeholder") && $lastItem.show();
        }

    });

});

HTML

<nav class="navbar navbar-default">
    <div class="container-fluid">        
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav rp-draggable">

                <!-- Draggable Block -->
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Menu Items <span class="caret"></span></a>
                    <ul class="dropdown-menu rp-draggable" role="menu" id="catalog">
                        <li><a href="#">Link 1</a></li>
                        <li><a href="#">Link 2</a></li>
                        <li><a href="#">Link 3</a></li>
                    </ul>
                </li>
                <!-- /Draggable Block -->

                <!-- Droppable Block -->
                <li class="dropdown" id="header-my-apps">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i id="icon-my-apps"></i> <span class="hma-text"><i class="fa fa-star-o"></i>My Apps</span></a>
                    <div class="dropdown-menu header-favorites" role="menu">
                        <ul class="h-droped-list">
                            <li class="placeholder">My Favs</li>
                        </ul>
                    </div>
                </li>
                <!-- /Droppable Block -->

            </ul>

        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

Please ignore junk code while I copied from my project directly

Answer 1

That's because you were appending element to this i.e. #header-my-apps and not to ul with class h-droped-list. I made below changes in your $("#header-my-apps").droppable({ part and hope that's what you want:

var dropPlace=$(this).find('ul.h-droped-list');       
$(ui.draggable).addClass("addedToFav").clone().appendTo(dropPlace);

DEMO HERE