对于工作中的项目,我们在
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;
}
