jQuery 使引导程序 twitter 对话框模式可拖动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12571922/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
make bootstrap twitter dialog modal draggable
提问by paganotti
I'm trying to make bootstrap twitter dialog modal draggable with this jquery plugin:
我正在尝试使用此 jquery 插件使引导程序 twitter 对话框模式可拖动：
http://threedubmedia.com/code/event/drag#demos
http://threedubmedia.com/code/event/drag#demos
but it doesn't work.
但它不起作用。
var $div = $('html');
console.debug($('.drag'));
$('#modalTest')
.drag("start", function(ev, dd) {
dd.limit = $div.offset();
dd.limit.bottom = dd.limit.top + $div.outerHeight() - $(this).outerHeight();
dd.limit.right = dd.limit.left + $div.outerWidth() - $(this).outerWidth();
})
.drag(function(ev, dd) {
$(this).css({
top: Math.min(dd.limit.bottom, Math.max(dd.limit.top, dd.offsetY))
, left: Math.min(dd.limit.right, Math.max(dd.limit.left, dd.offsetX))
});
});
Have you idea how can I do it?
你知道我该怎么做吗？
回答by Mizbah Ahsan
$("#myModal").draggable({
handle: ".modal-header"
});
it works for me. I got it from there. if you give me thanks please give 70% to Andres Ilich
这个对我有用。我从那里得到的。如果你感谢我，请把 70% 给Andres Ilich
回答by Below the Radar
You can use the code below if you dont want to use jQuery UI or any third party pluggin. It's only plain jQuery.
如果您不想使用 jQuery UI 或任何第三方插件，您可以使用下面的代码。它只是普通的 jQuery。
This answer works well with Bootstrap v3.x . For version 4.x see @User comment below
这个答案适用于 Bootstrap v3.x 。对于 4.x 版，请参阅下面的 @User 评论
$(".modal").modal("show");
$(".modal-header").on("mousedown", function(mousedownEvt) {
var $draggable = $(this);
var x = mousedownEvt.pageX - $draggable.offset().left,
y = mousedownEvt.pageY - $draggable.offset().top;
$("body").on("mousemove.draggable", function(mousemoveEvt) {
$draggable.closest(".modal-dialog").offset({
"left": mousemoveEvt.pageX - x,
"top": mousemoveEvt.pageY - y
});
});
$("body").one("mouseup", function() {
$("body").off("mousemove.draggable");
});
$draggable.closest(".modal").one("bs.modal.hide", function() {
$("body").off("mousemove.draggable");
});
});.modal-header {
cursor: move;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>回答by IdahoB
The top-ranked solution (by Mizbah Ahsan) is not quite right ...but is close. If you apply draggable() to the modal dialog element, the browser window scroll bars will drag around the screen as you drag the modal dialog. The way to fix that is to apply draggable() to the modal-dialog class instead:
排名靠前的解决方案（由 Mizbah Ahsan 提供）不太正确……但很接近。如果您将 draggable() 应用于模态对话框元素，则浏览器窗口滚动条将在您拖动模态对话框时在屏幕上拖动。解决这个问题的方法是将 draggable() 应用于 modal-dialog 类：
$(".modal-dialog").draggable({
handle: ".modal-header"
});
Thanks!
谢谢！
回答by 1_bug
Like others said, the simpliest solution is just call draggable()function from jQuery UIjust after showing modal:
就像其他人说的那样，最简单的解决方案就是 在显示模态之后draggable()从jQuery UI调用函数：
$('#my-modal').modal('show')
.draggable({ handle: ".modal-header" });
But there is a several problems with compatibility between Bootstrapand jQuery UIso we need some addition fixes in css:
但是Bootstrap和jQuery UI之间的兼容性存在一些问题，因此我们需要在 css 中进行一些额外的修复：
.modal
{
overflow: hidden;
}
.modal-dialog{
margin-right: 0;
margin-left: 0;
}
.modal-header{ /* not necessary but imo important for user */
cursor: move;
}
回答by Slim Fadi
use the jquery UI draggable, much simpler http://jqueryui.com/draggable/
使用 jquery UI 可拖动，更简单 http://jqueryui.com/draggable/
回答by Gordon
i did this:
我这样做了：
$("#myModal").modal({}).draggable();
and it make my very standard/basic modal draggable.
它使我非常标准/基本的模态可拖动。
not sure how/why it worked, but it did.
不知道它是如何/为什么工作的，但确实如此。
回答by Snoozer
For the mouse cursor (with jQuery UI) :
对于鼠标光标（使用 jQuery UI）：
$('#my-modal').draggable({
handle: ".modal-header"
});
For the touch cursor (with jQuery):
对于触摸光标（使用 jQuery）：
var box = null;
var touchobj = null;
var position = {'x':0, 'y':0};
var positionbox = {'x':0, 'y':0};
// init touch
$('.modal-header').on('touchstart', function(e){
box = $(this).closest('.modal-dialog');
touchobj = e.changedTouches[0];
// take position touch cursor
position['x'] = touchobj.pageX;
position['y'] = touchobj.pageY;
//take original position box to move with touch
positionbox['x'] = parseInt(box.css('left'));
positionbox['y'] = parseInt(box.css('top'));
e.preventDefault();
});
// on move touch
$('.modal-header').on('touchmove', function(e){
var dist = {'x':0, 'y':0};
touchobj = e.changedTouches[0];
// we calculate the distance of move
dist['x'] = parseInt(touchobj.clientX) - position['x'];
dist['y'] = parseInt(touchobj.clientY) - position['y'];
// we apply the movement distance on the box
box.css('left', positionbox['x']+dist['x'] +"px");
box.css('top', positionbox['y']+dist['y'] +"px");
e.preventDefault();
});
The addition of the 2 solutions is compatible
2个解决方案的添加是兼容的
回答by Rotimi
In my own case, i had to set backdropand set the topand leftproperties before i could apply draggablefunction on the modal dialog. Maybe it might help someone ;)
在我自己的情况下，我必须先设置backdrop和设置top和left属性，然后才能draggable在模态对话框上应用函数。也许它可以帮助某人;)
if (!($('.modal.in').length)) {
$('.modal-dialog').css({
top: 0,
left: 0
});
}
$('#myModal').modal({
backdrop: false,
show: true
});
$('.modal-dialog').draggable({
handle: ".modal-header"
});
回答by Jugal Panchal
In my case I am enabling draggable. It works.
就我而言，我启用了可拖动。有用。
var bootstrapDialog = new BootstrapDialog({
title: 'Message',
draggable: true,
closable: false,
size: BootstrapDialog.SIZE_WIDE,
message: 'Hello World',
buttons: [{
label: 'close',
action: function (dialogRef) {
dialogRef.close();
}
}],
});
bootstrapDialog.open();
Might be it helps you.
可能对你有帮助。
