使引导Twitter的对话模式可拖动(make bootstrap twitter dialog m

2019-07-31 21:07发布

我努力使引导Twitter的对话模式与拖动这个jQuery插件:

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

有你的想法我该怎么办呢?

Answer 1:

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

这个对我有用。 从我得到了它那里 。 如果你给我谢谢请给70%至安德烈斯·伊里奇



Answer 2:

排名第一的溶液(Mizbah阿赫桑)是不完全正确......但接近。 如果你申请可拖动()的模态对话框元素,如您拖动模式对话框的浏览器窗口滚动条将屏幕上拖动。 要解决这个问题的方法是应用可拖动()的模式,对话框类来代替:

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

谢谢!



Answer 3:

您可以使用下面的代码,如果你不想使用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> 



Answer 4:

与其他人一样说,该simpliest解决方案只需要调用draggable()jQuery UI的功能只是显示模式后:

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

但是有一个几个问题引导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;
}


Answer 5:

使用jQuery UI的拖拽,简单得多http://jqueryui.com/draggable/



Answer 6:

我这样做:

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

它使我非常标准/基本模式可拖动。

不知道如何/为什么它的工作,但它没有。



Answer 7:

在我的情况下,我能够拖动。 有用。

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

可能是它可以帮助你。



Answer 8:

就我自己来说,我必须设置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"
});


文章来源: make bootstrap twitter dialog modal draggable