make bootstrap twitter dialog modal draggable

I'm trying to make bootstrap twitter dialog modal draggable with this jquery plugin:

我正在尝试用这个jquery插件制作bootstrap twitter对话模式draggable：

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?

你有没有想过我该怎么办？

7 个解决方案

#1

$("#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

这个对我有用。我从那里得到了它。如果你感谢我，请给Andres Ilich 70％

#2

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").draggable({
    handle: ".modal-header"
});

Thanks!

谢谢！

#3

use the jquery UI draggable, much simpler http://jqueryui.com/draggable/

使用jquery UI可拖动，更简单http://jqueryui.com/draggable/

#4

Like others said, the simpliest solution is just call draggable() function from jQuery UI just after showing modal:

像其他人说的那样，最简单的解决方案就是在显示模态之后从jQuery UI调用draggable（）函数：

$('#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:

但是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;
}

#5

i did this:

我这样做了：

$("#myModal").modal({}).draggable();

and it make my very standard/basic modal draggable.

它使我的标准/基本模态可拖动。

not sure how/why it worked, but it did.

不确定它是如何/为什么有效，但确实如此。

#6

In my case I am enabling draggable. It works.

在我的情况下，我启用draggable。有用。

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.

可能会帮助你。

#7

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"
});