I'm trying to make bootstrap twitter dialog modal draggable with this jquery plugin:
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?
This question is related to
jquery
twitter-bootstrap
modal-dialog
draggable
use the jquery UI draggable, much simpler http://jqueryui.com/draggable/
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:
$(".modal-dialog").draggable({
handle: ".modal-header"
});
Thanks!
i did this:
$("#myModal").modal({}).draggable();
and it make my very standard/basic modal draggable.
not sure how/why it worked, but it did.
$("#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
Like others said, the simpliest solution is just call draggable()
function from jQuery UI just after showing modal:
$('#my-modal').modal('show')
.draggable({ handle: ".modal-header" });
But there is a several problems with compatibility between Bootstrap and jQuery UI so we need some addition fixes in css:
.modal
{
overflow: hidden;
}
.modal-dialog{
margin-right: 0;
margin-left: 0;
}
.modal-header{ /* not necessary but imo important for user */
cursor: move;
}
You can use the code below if you dont want to use jQuery UI or any third party pluggin. It's only plain jQuery.
This answer works well with Bootstrap v3.x . For version 4.x see @User comment below
$(".modal").modal("show");_x000D_
_x000D_
$(".modal-header").on("mousedown", function(mousedownEvt) {_x000D_
var $draggable = $(this);_x000D_
var x = mousedownEvt.pageX - $draggable.offset().left,_x000D_
y = mousedownEvt.pageY - $draggable.offset().top;_x000D_
$("body").on("mousemove.draggable", function(mousemoveEvt) {_x000D_
$draggable.closest(".modal-dialog").offset({_x000D_
"left": mousemoveEvt.pageX - x,_x000D_
"top": mousemoveEvt.pageY - y_x000D_
});_x000D_
});_x000D_
$("body").one("mouseup", function() {_x000D_
$("body").off("mousemove.draggable");_x000D_
});_x000D_
$draggable.closest(".modal").one("bs.modal.hide", function() {_x000D_
$("body").off("mousemove.draggable");_x000D_
});_x000D_
});
_x000D_
.modal-header {_x000D_
cursor: move;_x000D_
}
_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>_x000D_
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>_x000D_
_x000D_
<div class="modal fade" tabindex="-1" role="dialog">_x000D_
<div class="modal-dialog" role="document">_x000D_
<div class="modal-content">_x000D_
<div class="modal-header">_x000D_
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>_x000D_
<h4 class="modal-title">Modal title</h4>_x000D_
</div>_x000D_
<div class="modal-body">_x000D_
<p>One fine body…</p>_x000D_
</div>_x000D_
<div class="modal-footer">_x000D_
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>_x000D_
<button type="button" class="btn btn-primary">Save changes</button>_x000D_
</div>_x000D_
</div><!-- /.modal-content -->_x000D_
</div><!-- /.modal-dialog -->_x000D_
</div>
_x000D_
For the mouse cursor (with jQuery UI) :
$('#my-modal').draggable({
handle: ".modal-header"
});
For the touch cursor (with 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
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.
In my own case, i had to set backdrop
and set the top
and left
properties before i could apply draggable
function on the modal dialog. Maybe it might help someone ;)
if (!($('.modal.in').length)) {
$('.modal-dialog').css({
top: 0,
left: 0
});
}
$('#myModal').modal({
backdrop: false,
show: true
});
$('.modal-dialog').draggable({
handle: ".modal-header"
});
Source: Stackoverflow.com