Question

我想创建一个跟随可拖动图像的Bootstrap popover（使用jQuery UI Draggable库）。通过“跟随”，我的意思是如果图像向右拖动10个像素，则弹出窗口也向右移动10个像素。我遇到的问题是我不确定如何将Bootstrap popover链接到图像。 popover初始化程序中的'container'参数似乎不起作用（理想情况下，我想将图像和popover放在父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。

可拖动的Bootstrap Popover

1 个答案:

Demo: http://bootply.com/61825