我想拖动或移动酥料饼的,因为当有一个页面那么双酥料饼是由相互重叠2米酥料饼的开放。对于这件事,你可以检查下面的截图。
所以我想使用鼠标光标指针在那里我希望把移动酥料饼。所以,我可以同时看到酥料饼在同一时间。
我已代码。
<!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
提前致谢。
您可以在‘一’的标签使用的数据放置=“...”来处理情况popovers应该打开。例如,在你的代码,它可以像:
<!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>
数据放置内的值可以是:上下右和左
更新:我认为它会为你工作:
$(".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/
建议:尝试采取控制酥料饼和重写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'
});
});