Draggable JS Bootstrap modal - 性能问题

Posted 2023-05-08

【中文标题】Draggable JS Bootstrap modal - 性能问题

【英文标题】：Draggable JS Bootstrap modal - performance issues

【发布时间】：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。

【参考方案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 解决了我看到的问题