如何使用 jquery 或 css 在引导程序中使可拖动弹出？答案

【问题标题】：How to make draggable pop over in bootstrap using jquery or css?如何使用 jquery 或 css 在引导程序中使可拖动弹出？
【发布时间】：2019-02-04 05:35:41
【问题描述】：

我想要可拖动或可移动的弹出框，因为当一页中有两个弹出框打开时，两个弹出框会相互重叠。对于这件事，您可以查看下面的屏幕截图。

所以我想使用鼠标光标指针移动弹出框我想要放置的位置。所以我可以同时看到两个弹出窗口。

我已经编码了。

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h3>Popover Example</h3>
  <a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover1</a>
  <br/>
  <a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover2</a>
</div>

<script>
$(document).ready(function(){
    $('[data-toggle="popover"]').popover();   
});
</script>

</body>
</html>

我认为我可以使用可拖动功能，但它不起作用我不知道如何在 jQuery 上应用，所以它可以工作。

根据我的需要，您可以检查此可移动模式，我需要在我的弹出框上进行相同的可移动操作。为此，请查看下面的 gif 截图和链接以获得更多理解。
链接：https://codepen.io/adamcjoiner/pen/PNbbbv

提前致谢。

【问题讨论】：

标签： jquery html draggable popover movable

【解决方案1】：

您可以在“a”标签中使用 data-placement="..." 来处理弹出框应该打开的位置。例如，在您的代码中，它可以是：

        <!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h3>Popover Example</h3>
  <p>Popovers are not CSS-only plugins, and must therefore be initialized with jQuery: select the specified element and call the popover() method.</p>
  <a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover" data-placement="top">First popover</a>
    <a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover" data-placement="bottom">Second popover</a>
</div>

<script>
$(document).ready(function(){
  $('[data-toggle="popover"]').popover();   
});
</script>

</body>
</html>

data-placement 中的值可以是：top-bottom-right 和 left

更新：我认为它对你有用：

$(".draggable").popover({
    html:true,
    content: "<p>Drag me</p>"

}).popover('show');

$('.popover').draggable();

    .popover{position: relative !important}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.js"
 integrity="sha256-0vBSIAi/8FxkNOSKyPEfdGQzFDak1dlqFKBYqBp1yC4="
 crossorigin="anonymous"></script>
 
 
<div class="row">
  <div class ="col-auto">
  <h2>
   sendhelp
  </h2>
  </div>
</div>
<div id="Normal">
    <a class="btn btn-primary draggable">Popover</a>
</div>

更新 2：我做了一个小提琴，你可以使用它： https://jsfiddle.net/uhwrev06/

现在它完全随着鼠标移动，它们之间没有空间！

更新 3：我解决了你刚才提到的问题！ https://jsfiddle.net/pe2zf1x8/

【讨论】：

您可以查看此codepen.io/adamcjoiner/pen/PNbbbv 链接，您可以使用鼠标在弹出框上移动我需要此可移动操作的模式。
检查我编辑的答案，以准确了解我的需求。
检查这个小提琴，但记得删除css：jsfiddle.net/aq9Laaew/153665
哦，根据我的需要真的很好。但是你可以告诉我如何缩小鼠标光标和弹出框之间的距离？所以它可以让它变得完美。
再次检查答案。我更新小提琴并修复错误！如果它适合您，请将其标记为答案！祝你好运

【解决方案2】：

建议：尝试控制 popover 并覆盖 CSS。

 $('#elm').popover({
        placement: 'bottom',
        html: true,
        content: function() {
            return $('#container').html();
        },


        template: '<div class="popover my-popover" role="tooltip"><div class="arrow"></div><div class="popover-content"></div></div>'
    });

CSS 示例：

.popover.my-popover {
    margin-left: 15px;
    margin-top: -20px;

    /* Or: margin: -20px 0 0 15px; */
}

订阅 shown.bs.popover 事件：

$('#my-popover').on('shown.bs.popover', function() {
    // parseInt removes "px"
    var currentTop = parseInt($(this).css('top'));
    var currentLeft = parseInt($(this).css('left'));

    $(this).css({
        top: (currentTop + 200) + 'px',
        left: (currentLeft + 150) + 'px'
    });
});

【讨论】：

根据您的回答，我有一个想法，就是在底部添加位置，谢谢。但我想要使用鼠标光标拖动弹出框，然后我们想要放置到我们想要的其他位置。
您可以查看此codepen.io/adamcjoiner/pen/PNbbbv 链接，您可以在弹出框上移动我需要此可移动操作的模态。