可拖动的JS引导模式-性能问题

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

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

,
源。
在IE9中，它像预期的那样工作。在Chrome中，水平拖动工作如预期，垂直拖动相当慢，但没有问题。
在Firefox中，水平拖动可以像预期的那样工作，但是垂直拖动非常慢。

这很奇怪，因为示例窗口的图形并不重，JQuery应该规范浏览器行为。我尝试在不使用JQuery的draggable的情况下解决这个问题，但我遇到了同样的问题。

我有几个问题:

是浏览器，JQuery, Bootstrap的故障还是我的代码不优化?
为什么水平和垂直拖动之间存在差异?
我应该找到一个解决方案，或者只是避免引导完全动态弹出?

亲切的问候,圭多

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

添加到你的CSS文件将禁用transition效果，而模态被拖动。然而，似乎一旦用户拖动了这个框，苍蝇就不会正确地出现，而是会逐渐消失。

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

或者将以下内容添加到你的CSS文件中，并将nofly类添加到你的模型中，将禁用所有的fly in，但不会禁用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;
}

我发现在bootstrap 3中我必须重写这些模态对话框的css属性:

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

小提琴

全屏演示

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

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

它通过.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的demo:http://jsfiddle.net/jcosnn6u/3/

注意:到目前为止，我只在Chrome, Firefox, Safari和移动设备上测试了这个，所以不能评论ie的兼容性

我更喜欢使用jqueryui。关于可拖动API的更多细节请参见:http://api.jqueryui.com/draggable/

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

问题

相关内容

最新更新

热门标签：