jquery - 使引导词缀可在屏幕上拖动

Question

我有一个引导词缀，它就像一个粘性窗口。这显示了一些关于用户现在悬停的信息的元数据。我正在尝试让这个粘性通知在屏幕上移动，这样如果它阻碍了他所看到的内容，用户就可以将其移开。我该怎么做呢？

Answer 1

您可以使用此解决方案；我在词缀内插入了一个按钮以在其上设置 jQuery UI 可拖动；同样用于切换词缀。

HTML：

<div id="nav-wrapper">
    <div id="nav" class="navbar">
        <div class="navbar-inner">
            <div class="container">
                <div class="span12"> <a class="brand" href="#">My Brand</a>
 <span class="navbar-text">
                    This is my navbar.
                    </span>

                    <button id="mover" class="btn-danger pull-right">Move me!</button>
                </div>
            </div>
            <!-- container -->
        </div>
        <!-- navbar-inner -->
    </div>
    <!-- navbar -->
</div>

代码：

$('#nav').affix();
$("#nav").data("left", $("#nav").position().left).data("top", $("#nav").position().top);

$('#mover').click(function () {
    if ($('#nav').hasClass("movable")) {
        $('#nav').draggable('destroy');
        $("#nav").animate({
            "left": $("#nav").data("left"),
                "top": $("#nav").data("top")
        });
        $(window).scrollTop();
$("#nav").removeAttr("style")
        $('#nav').removeClass("movable");
        $(this).text("Move me!")
    } else {
        $('#nav').draggable({cursor: "crosshair"});
        $('#nav').addClass("movable");
        $(this).text("Affix me!")
    }
})

演示：http: //jsfiddle.net/IrvinDominin/YA2kX/