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

时间:2014-01-29 23:08:04

标签: javascript jquery jquery-ui draggable

我希望在删除时在标题中获得标签的副本。 我该怎么办?当我把它拖到标题时它消失了......

我目前使用这个简单的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>

我创造了一个小提琴来测试它:

jsFiddle

1 个答案:

答案 0 :(得分:2)

我在你的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/