javascript – 可拖拉的JS Bootstrap模态 – 性能问题

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

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

Example,
Source.
在IE9,它的工作原理.
在Chrome中,水平拖动按预期方式工作,垂直拖动速度相当慢但没有问题.
在Firefox中,但垂直拖动速度非常慢.

这是奇怪的,因为示例窗口不是图形重,JQuery应该规范化浏览器的行为.我尝试解决这个问题,而不使用JQuery的draggable,但是我遇到了同样的问题.

所以我有几个问题：

>浏览器的性能是否慢,JQuery,Bootstrap还是我的代码不是最佳的？
>为什么水平和垂直拖动有区别？
>我应该找到解决方法,还是仅仅为了动态弹出窗口避免Bootstrap？

亲切的问候,
圭多

解决方法

我找到了几种方法来解决这个问题.

将其添加到您的CSS文件将在拖动模态时禁用转换效果.然而,似乎一旦用户拖动盒子,飞行将不会正确地发生,而只会淡入淡出.

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