twitter-bootstrap Draggable JS Bootstrap 模式 - 性能问题

Draggable JS Bootstrap modal - performance issues

提问by Jodiug

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.

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

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

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.

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

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 应该规范浏览器行为。我尝试不使用 JQuery 的可拖动来解决这个问题，但我遇到了同样的问题。

So I have a couple of questions:

所以我有几个问题：

• Is the slow performance the fault of the browser, JQuery, Bootstrap or is my code not optimal?
• Why is there a difference between horizontal and vertical dragging?
• Should I find a workaround, or just avoid Bootstrap altogether for dynamic popups?

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

Kind regards, Guido

亲切的问候，圭多

回答by bbodenmiller

I found a few ways to fix this.

我找到了几种方法来解决这个问题。

Adding this to your CSS file will disable the transitioneffects 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.

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

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

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

或者，将以下内容添加到您的 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;
}

回答by David Wilton

I found that at bootstrap 3 I had to override these css properties of the modal dialog:

我发现在引导程序 3 中，我必须覆盖模态对话框的这些 css 属性：

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

Fiddle

小提琴

Full screen demo

全屏演示

回答by lunr

This does not exactly answer your questions, but you may try to disable the *-transitionproperties or decreasing the time value from the specified 0.3s. This is defined in .modal.fade. But this will mess with the initial pop-up animation too. If this is not acceptable, you may use the startevent of the draggablewidget to apply the new style.

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

回答by Iain Collins

With Bootstrap 3.3 and jQuery UI 1.1 I'm adding a class called "modal-draggable" to the element with the "modal" class.

使用 Bootstrap 3.3 和 jQuery UI 1.1，我将一个名为“modal-draggable”的类添加到具有“modal”类的元素中。

It binds to the .modal-dialogelement inside containers with the .modal-draggableclass (unlike some examples here which bind to the actual container).

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

There is some CSS so scrolling for long dialogs still work across devices of all screen sizes.

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

CSS:

CSS：

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

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

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

JavaScript:

JavaScript：

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

See the JS Fiddle here for a demo: http://jsfiddle.net/jcosnn6u/3/

请参阅此处的 JS Fiddle 进行演示：http: //jsfiddle.net/jcosnn6u/3/

NB: So far I have only tested this in Chrome, Firefox and Safari and mobile devices, so can't comment on Internet Explorer compatibility.

注意：到目前为止，我只在 Chrome、Firefox 和 Safari 以及移动设备上测试过这个，所以不能评论 Internet Explorer 的兼容性。

回答by Doogal

Although the suggested CSS changes worked for me, I didn't like the dialog being shown on the left initially. Upgrading jquery UI from 1.9 to 1.11 fixed the issue I was seeing

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

回答by luongnv89

I prefer using jqueryui. More detail about draggable API here: http://api.jqueryui.com/draggable/

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