可拖動的JS Bootstrap模式 - 性能問題

Question

對於工作中的項目，我們在JavaScript中使用Bootstrap Modal窗口。 我們想讓一些窗口可移動，但我們遇到了JQuery的性能問題。

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

例子 ，
來源 。
在IE9中，它按預期工作。
在Chrome中，水平拖動按預期工作，垂直拖動相當慢，但沒有問題。
在Firefox中，水平拖動按預期工作，但垂直拖動非常慢。

這很奇怪，因為示例窗口沒有圖形化的重量，JQuery應該規范化瀏覽器行為。 我嘗試在不使用JQuery的可拖動的情況下解決這個問題，但我遇到了同樣的問題。

所以我有幾個問題：

• 緩慢的性能是瀏覽器，JQuery，Bootstrap的錯誤還是我的代碼不是最優的？
• 為什么水平拖動和垂直拖動之間存在差異？
• 我應該找到一個解決方法，還是完全避免使用Bootstrap動態彈出窗口？

親切的問候，Guido

Answer 1

我找到了一些方法來解決這個問題。

將此項添加到CSS文件將在拖動模態時禁用transition效果。 然而，似乎一旦用戶拖動盒子，飛入將不會正確發生，而是它將剛剛淡入。

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

或者，將以下內容添加到CSS文件中，並將nofly類添加到模型中將一起禁用fly，但不會淡入淡入：

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

Answer 2

我發現在bootstrap 3中我必須覆蓋模態對話框的這些css屬性：

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

小提琴

全屏演示

Answer 3

這並不完全回答您的問題，但您可能會嘗試禁用*-transition屬性或從指定的0.3s減少時間值。 這在.modal.fade定義。 但這也會影響最初的彈出動畫。 如果這是不可接受的，您可以使用draggable窗口小部件的start事件來應用新樣式。

Answer 4

使用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 Fiddle這里進行演示： http ： //jsfiddle.net/jcosnn6u/3/

注意：到目前為止，我只在Chrome，Firefox和Safari以及移動設備上對此進行了測試，因此無法對Internet Explorer兼容性發表評論。

Answer 5

我更喜歡使用jqueryui。 有關可拖動API的更多詳細信息，請訪問： http ： //api.jqueryui.com/draggable/

Answer 6

盡管建議的CSS更改對我有用，但我最初並不喜歡左邊顯示的對話框。 將jquery UI從1.9升級到1.11修復了我看到的問題