可拖动的JS Bootstrap模式 - 性能问题

Question

对于工作中的项目,我们在JavaScript中使用Bootstrap Modal窗口.我们想让一些窗口可移动,但我们遇到了JQuery的性能问题.

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

示例 ,
来源 .
在IE9中,它按预期工作.
在Chrome中,水平拖动按预期工作,垂直拖动相当慢,但没有问题.
在Firefox中,水平拖动按预期工作,但垂直拖动非常慢.

这很奇怪,因为示例窗口没有图形化的重量,JQuery应该规范化浏览器行为.我尝试在不使用JQuery的可拖动的情况下解决这个问题,但我遇到了同样的问题.

所以我有几个问题:

• 缓慢的性能是浏览器,JQuery,Bootstrap的错误还是我的代码不是最优的？
• 为什么水平拖动和垂直拖动之间存在差异？
• 我应该找到一个解决方法,还是完全避免使用Bootstrap动态弹出窗口？

亲切的问候,Guido

Answer 1

我找到了一些方法来解决这个问题.

将此添加到CSS文件将transition在拖动模式时禁用效果.然而,似乎一旦用户拖动盒子,飞入将不会正确发生,而是它将刚刚淡入.

.modal.fade.ui-draggable-dragging {
    -moz-transition: none;
    -o-transition: none;
    -webkit-transition: none;
    transition: none;
}

或者,将以下内容添加到CSS文件中,将nofly类添加到模型中将禁用所有内容,但不会淡入淡入:

.modal.fade.nofly {
    top: 10%;        
    -webkit-transition: opacity 0.3s linear;
    -moz-transition: opacity 0.3s linear;
    -o-transition: opacity 0.3s linear;
    transition: opacity 0.3s linear;
}

Answer 2

我发现在bootstrap 3中我必须覆盖模态对话框的这些css属性:

.modal
{
    overflow: hidden;
    bottom: auto;
    right: auto;
}
.modal-dialog{
    margin-right: 0;
    margin-left: 0;
}

小提琴

全屏演示