Question

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

我想从＆＃34;菜单项＆＃34;中拖出一个元素项下拉并放入＆＃34;我的应用程序＆＃34;落下。被删除的元素应该进入＆＃34; My Apps > ul > li＆＃34;这将默认隐藏，直到我点击我的应用程序链接。

PS： 我的应用是<li>商品

一切正常，除非它直接掉到＆＃34; My Apps > li＆＃34;元素而不是＆＃34; My Apps > ul > li＆＃34;。

我试过了没有运气的＆＃34; $("#header-my-apps>li").appendTo("#header-my-apps ul.h-droped-list");＆＃34; :(

皮斯帮助我。

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

带有Bootstrap Navbar的jQuery UI Droppable - 如何删除Dropdown中的项目

FIDDLE

1 个答案: