可拖JS引导模式-性能问题
可拖JS引导模式-性能问题
提问于 2013-04-08 14:05:06
对于一个正在工作的项目，我们在JavaScript中使用Bootstrap窗口。我们想让一些窗口可以移动，但是我们遇到了JQuery的性能问题。
$("#myModal").draggable({
handle: ".modal-header"
});示例，
来源。
在IE9中，它按预期工作。
在Chrome中，水平拖动按预期工作，垂直拖动非常慢，但没有问题。
在Firefox中，水平拖动可以像预期的那样工作，但是垂直拖动非常慢。
这很奇怪，因为示例窗口不太大，而且JQuery应该将浏览器行为正常化。我尝试不使用JQuery的可拖动性来解决这个问题，但遇到了同样的问题。
所以我有几个问题：
- 缓慢的性能是浏览器、JQuery、引导程序的错误还是我的代码不是最优的？
- 为什么水平拖和垂直拖有区别？
- 我应该找到一个解决办法，还是干脆避免在动态弹出窗口中使用Bootstrap？
好样的，吉多
回答 6
Stack Overflow用户
回答已采纳
发布于 2013-06-17 18:44:28
我找到了一些方法来解决这个问题。
将此添加到您的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;
}Stack Overflow用户
发布于 2013-09-17 12:48:35
我发现，在引导程序3中，我必须重写模态对话框的这些css属性：
.modal
{
overflow: hidden;
bottom: auto;
right: auto;
}
.modal-dialog{
margin-right: 0;
margin-left: 0;
}小提琴
全屏演示
Stack Overflow用户
发布于 2013-05-04 20:11:34
这并不完全回答您的问题，但您可以尝试禁用*-transition属性或从指定的0.3s中减少时间值。这是在.modal.fade中定义的。但这也会破坏最初的弹出式动画。如果这是不可接受的，您可以使用start小部件的draggable事件来应用新样式。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/15881245
复制相关文章
相似问题
腾讯云开发者
