make bootstrap twitter dialog modal draggable

时间:2012-09-24 19:51:58

标签: jquery twitter-bootstrap modal-dialog draggable

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

http://threedubmedia.com/code/event/drag#demos

但它不起作用。

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

你知道我该怎么办?

9 个答案:

答案 0 :(得分:82)

$("#myModal").draggable({
    handle: ".modal-header"
}); 

它对我有用。我是从there得到的。如果你感谢我,请给予Andres Ilich

70%

答案 1 :(得分:25)

排名靠前的解决方案(由Mizbah Ahsan提供)并不是很正确......但是很接近。如果将draggable()应用于模态对话框元素,则在拖动模式对话框时,浏览器窗口滚动条将在屏幕上拖动。解决这个问题的方法是将draggable()应用于模态对话框类:

$(".modal-dialog").draggable({
    handle: ".modal-header"
});

谢谢!

答案 2 :(得分:13)

如果您不想使用jQuery UI或任何第三方插件,可以使用下面的代码。这只是普通的jQuery。

$(".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">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</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>

答案 3 :(得分:7)

像其他人所说的那样,最简单的解决方案就是在显示模态后立即从 jQuery UI 调用draggable()函数:

$('#my-modal').modal('show')
              .draggable({ handle: ".modal-header" });

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

答案 4 :(得分:6)

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

答案 5 :(得分:4)

我这样做了:

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

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

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

答案 6 :(得分:0)

在我的情况下,我启用了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();

可能会帮助你。

答案 7 :(得分:0)

就我自己而言,我必须先设置backdrop并设置topleft属性,然后才能在模态对话框中应用draggable功能。也许它可以帮助某人;)

if (!($('.modal.in').length)) {       
$('.modal-dialog').css({
     top: 0,
     left: 0
   });
}
$('#myModal').modal({
  backdrop: false,
   show: true
});

$('.modal-dialog').draggable({
  handle: ".modal-header"
});

答案 8 :(得分:0)

对于鼠标光标(使用jQuery UI):

import torch as t
import numpy as np

x = t.Tensor([1,2,3])
print(np.percentile(x, 30)) # 30-th percentile of x
# 1.6

对于触摸光标(使用jQuery):

$('#my-modal').draggable({
    handle: ".modal-header"
});

两种解决方案的添加是兼容的