9

作業中のプロジェクトでは、JavaScript で Bootstrap Modal ウィンドウを使用します。一部のウィンドウを移動可能にしたいのですが、JQuery でパフォーマンスの問題が発生しています。

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

例 、
ソース 。
IE9 では、期待どおりに動作します。
Chrome では、水平方向のドラッグは期待どおりに機能し、垂直方向のドラッグはかなり遅くなりますが、問題はありません。
Firefox では、水平方向のドラッグは期待どおりに機能しますが、垂直方向のドラッグは非常に遅くなります。

サンプル ウィンドウはグラフィカルに重くなく、JQuery はブラウザーの動作を正規化するはずなので、これは奇妙です。JQueryのドラッグ可能を使用せずにこれを解決しようとしましたが、同じ問題に遭遇しました。

だから私はいくつかの質問があります：

  • パフォーマンスが遅いのはブラウザ、JQuery、Bootstrap のせいですか、それとも私のコードが最適ではないのですか?
  • 水平ドラッグと垂直ドラッグに違いがあるのはなぜですか?
  • 回避策を見つけるか、動的ポップアップの Bootstrap を完全に回避する必要がありますか?

よろしく、 グイド

4

6 に答える 6

1

Bootstrap 3.3 と jQuery UI 1.1 では、「modal」クラスを持つ要素に「modal-draggable」というクラスを追加しています。

クラスを使用してコンテナー内の.modal-dialog要素に.modal-draggableバインドします (実際のコンテナーにバインドするいくつかの例とは異なります)。

いくつかの 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 の互換性についてコメントすることはできません。

于 2015-03-16T15:54:41.283 に答える
0

私はjqueryuiを使用することを好みます。ここでドラッグ可能な API の詳細: http://api.jqueryui.com/draggable/

于 2014-12-23T11:55:39.600 に答える
0

提案された CSS の変更はうまくいきましたが、最初は左側に表示されるダイアログが気に入らなかったのです。jquery UI を 1.9 から 1.11 にアップグレードすると、発生していた問題が修正されました

于 2016-12-19T21:23:47.430 に答える