jQuery UI Droppable with Bootstrap Navbar - 如何在下拉菜单中放置一个项目

Question

我正在使用带有 Bootstrap 菜单导航的 jQuery UI droppable...

我想从“菜单项”下拉列表中拖动一个元素项并将其放到“我的应用程序”下拉列表中。删除的元素应以“My Apps > ul > li”的形式进入内部，默认情况下将隐藏，直到我单击“我的应用”链接。

PS： 我的应用是<li> item

一切正常，只是它直接下降到“My Apps > li”元素而不是“My Apps > ul > li”。

我试过了 "$("#header-my-apps>li").appendTo("#header-my-apps ul.h-droped-list");" 运气不好 :(

请帮帮我。

---

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>

当我直接从我的项目中复制时，请忽略垃圾代码

Answer 1

这是因为您将元素附加到 this 即 #header-my-apps 而不是 ul 类 h-droped-list。我在您的$("#header-my-apps").droppable({ 部分进行了以下更改，希望这就是您想要的：

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

DEMO HERE