javascript - 可拖动的引导弹出框

Question

我想创建一个跟随可拖动图像的 Bootstrap 弹出框（使用 jQuery UI Draggable 库）。“跟随”是指如果图像向右拖动 10 个像素，则弹出框也会向右移动 10 个像素。我遇到的问题是我不确定如何将 Bootstrap 弹出窗口链接到图像。弹出框初始化器上的“容器”参数似乎不起作用（理想情况下，我想将图像和弹出框放在父 div 中并使该 div 可拖动）。我不确定这样做的最佳方法是什么？优雅的解决方案会很棒，但一个hacky的解决方案总比没有好！

Answer 1

像这样的东西应该工作..

$('body').on('click', function (e) {
    $('[data-toggle=popover]').each(function () {
        // hide any open popovers when the anywhere else in the body is clicked
        if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
            $(this).popover('hide');
        }
    });
});

$("[data-toggle=popover]").mousedown(function(){
  // toggle popover when link is clicked
  $(this).popover('toggle');
});

$("[data-toggle=popover]").draggable({
  stop:function(){
    // show popover when drag stops
    $(this).popover('show');
  }
});

这假设您要在“单击”容器（链接）时显示弹出框。单击链接时弹出框将切换，或在拖动停止时显示。

此外，必须使用链接 (a href) 来包含可拖动对象。如果你想让链接看起来像一个 div 设置它的 CSS 为display:block.

演示：http://bootply.com/61825