Draggable listitem to header in menu

Question

I want to get a copy of the label in the header when dropped. How would i do this? It dissapears when i drag it to the header...

I currently use this simple js code

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

This is what should be dragged:

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

And it should be dragged into the following ul (there is an example item in it)

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

I created a fiddle to test it out:

jsFiddle

Answer 1

I added some classes to your html for reference:

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

Example:

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