可拖动的JS Bootstrap模式 - 性能问题 [英] Draggable JS Bootstrap modal - performance issues

问题描述

对于正在工作的项目，我们在JavaScript中使用Bootstrap Modal窗口。我们想让一些窗口可以移动，但是我们遇到了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动态弹出窗口？

亲切的问候，
Guido

Kind regards, Guido

推荐答案

我找到了几种解决方法。

I found a few ways to fix this.

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

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

这篇关于可拖动的JS Bootstrap模式 - 性能问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！