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

我有一个自举词缀，就像一个粘性的窗口。这显示了有关用户当前正在悬停的信息的一些元数据。我试图使此粘性通知在屏幕上移动，以便用户在遇到障碍时将其移开。我该怎么做呢？

最佳答案

您可以使用此解决方案；我在词缀内插入了一个按钮，以将其设置为可拖动的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/

关于jquery - 使引导词缀在屏幕上可拖动，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18598885/