javascript - 可将列表项拖动到菜单中的标题

Question

我想在掉落时获取 header 中标签的副本。我该怎么做？当我将它拖到标题时它就消失了...

我目前使用这个简单的js代码

$(function(){
    $(".draggable-tag").draggable({helper: "clone"});
});

这是应该拖动的内容:

<a href="/ByTag?Name=annual-report" class="text-muted draggable-tag ui-draggable"><span class="fa fa-tag"></span> annual-report</a>

并且应该将其拖到以下ul中(其中有一个示例项目)

<ul class="nav navbar-nav">
      <li class="tag-drag-drop divider-vertical-right"><a href=""><span class="fa fa-arrows"></span> Drag your tags to the menu here</a> </li>
</ul>

我创建了一个 fiddle 来测试它:

jsFiddle

Answer 1

我在您的 html 中添加了一些类以供引用:

HTML

<div id="topNav" class="navbar navbar-default navbar-fixed-top"> 

<div id="bottom" class="container" style="margin-top:55px;border-left:solid 1px #f2f2f2;">

jQuery

$(function(){
    $(".draggable-tag").draggable({
        helper: "clone",
        start: function( event, ui ) {
            ui.helper.css('z-index','1050');
         }
    });
    $("#topNav").droppable({
        drop: function( event, ui ) {
            $(this).find('.container .nav .tag-drag-drop').append(ui.draggable.clone());
            $('#bottom').css('margin-top',parseInt($('#bottom').css('margin-top'))+40+'px');
        }
    });
});

示例:

http://jsfiddle.net/trevordowdle/u62EP/2/