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

Question

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

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

Example ,
Source .
在 IE9 中，它按预期工作。
在 Chrome 中，水平拖动正常，垂直拖动速度较慢但没有问题。
在 Firefox 中，水平拖动按预期工作，但垂直拖动非常慢。

这很奇怪，因为示例窗口的图形并不繁重，而且 JQuery 应该规范浏览器行为。我尝试在不使用 JQuery 的可拖动对象的情况下解决这个问题，但我遇到了同样的问题。

所以我有几个问题:

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

亲切的问候， 圭多

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