Draggable JS Bootstrap modal - 性能问题答案

【问题标题】：Draggable JS Bootstrap modal - performance issuesDraggable JS Bootstrap modal - 性能问题
【发布时间】：2013-03-30 15:52:37
【问题描述】：

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

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

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

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

所以我有几个问题：

性能缓慢是浏览器、JQuery、Bootstrap 的问题还是我的代码不是最优的？
为什么水平和垂直拖动有区别？
我应该找到解决方法，还是完全避免使用 Bootstrap 来处理动态弹出窗口？

亲切的问候，圭多

【问题讨论】：

我遇到了同样的问题。不知何故，他们在 Twitter 上设法让它工作（当你点击一个用户时的模式）。关于你的第三个问题，我尝试使用 jQuery UI Bootstrap，这是一种两者的组合，不应该发生冲突，但工作量太大，所以我决定放弃并坚持使用 jQuery UI。

标签： javascript performance twitter-bootstrap modal-dialog draggable

【解决方案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;
}

【讨论】：

【解决方案2】：

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

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

Fiddle

Full screen demo

【讨论】：

这对我来说也是正确的解决方案。我现在唯一的问题是模式位于左侧，而不是居中。

【解决方案3】：

这并不能完全回答您的问题，但您可以尝试禁用*-transition 属性或减少指定0.3s 的时间值。这是在.modal.fade 中定义的。但这也会与最初的弹出动画混淆。如果这不可接受，您可以使用draggable 小部件的start 事件来应用新样式。

【讨论】：

【解决方案4】：

在 Bootstrap 3.3 和 jQuery UI 1.1 中，我向带有“modal”类的元素添加了一个名为“modal-draggable”的类。

它使用.modal-draggable 类绑定到容器内的.modal-dialog 元素（与此处绑定到实际容器的一些示例不同）。

有一些 CSS，因此滚动长对话框仍然适用于所有屏幕尺寸的设备。

CSS：

.modal-draggable .modal-backdrop {
  position: fixed;
}

.modal.modal-draggable {
    overflow: overflow-y;
}

.modal-draggable .modal-header:hover {
  cursor: move;
}

JavaScript：

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

在此处查看 JS Fiddle 以获取演示： http://jsfiddle.net/jcosnn6u/3/

注意：到目前为止，我只在 Chrome、Firefox 和 Safari 以及移动设备上进行了测试，因此无法评论 Internet Explorer 的兼容性。

【讨论】：

那些不能让它工作的人，请记住包括。它对我有用。

【解决方案5】：

我更喜欢使用 jqueryui。有关可拖动 API 的更多详细信息，请点击此处：http://api.jqueryui.com/draggable/

【讨论】：

【解决方案6】：

虽然建议的 CSS 更改对我有用，但我不喜欢最初显示在左侧的对话框。将 jquery UI 从 1.9 升级到 1.11 解决了我看到的问题

【讨论】：