Draggable JS Bootstrap modal - 性能问题

2022-01-17 00:00:00 performance draggable modal-dialog javascript twitter-bootstrap

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

For a project at work we use Bootstrap Modal windows in JavaScript. We would like to make some of the windows movable, but we are running into performance issues with JQuery.

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

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

Example ,
Source .
In IE9, it works as expected.
In Chrome, horizontal dragging works as expected, and vertical dragging is rather slow but not problematic.
In Firefox, horizontal dragging works as expected, but vertical dragging is extremely slow.

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

It's strange, because the example window is not graphically heavy and JQuery is supposed to normalize browser behavior. I tried solving this without using JQuery's draggable, but I ran into the same issue.

所以我有几个问题:

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

亲切的问候，圭多

推荐答案

我找到了一些方法来解决这个问题.

I found a few ways to fix this.

将此添加到您的 CSS 文件将在拖动模态时禁用 transition 效果.然而，似乎一旦用户拖动框，飞入将不会正确发生，而是会淡入.

Adding this to your CSS file will disable the transition effects while the modal is being dragged. It appears however that once the user drags the box the fly in will not occur correctly but rather it will just fade in.

.modal.fade.ui-draggable-dragging {
    -moz-transition: none;
    -o-transition: none;
    -webkit-transition: none;
    transition: none;
}

或者将以下内容添加到您的 CSS 文件和 nofly 类到您的模型将一起禁用飞入，但不会淡入:

Alternatively adding the following to your CSS file and the nofly class to your model will disable the fly in all together but not the fade in:

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

相关文章