Bootstrap のモーダルにドラッグ アンド ドロップ機能を追加する方法の詳細な紹介

この記事では主にBootstrap Modalにドラッグ＆ドロップを追加する詳細な方法を紹介しますので、参考にしてください。

【関連ビデオの推奨: Bootstrapチュートリアル】

Bootstrap Modalのドラッグアンドドロップ実装はインターネット上にたくさんありますが、コードの多くは複雑に見え、カプセル化があまり良くないものもあります。 jqueryを使う UIのドラッグ＆ドロップ機能が欲しいわけではない 実は2017年の春節中にBootstrap Modalにドラッグ＆ドロップ機能を追加していて、あっという間に1年が過ぎてしまいました。 2017 年の春節では、前のプロジェクトの同僚の何人かがフロントエンドとして Layer を使用していましたが、バックエンド開発のための JS フロントエンドの知識が少しある私にとって、全体を導入するのは困難でした。レイユイのいくつかのコンポーネントを参照したところ、コンポーネントの機能があまり完全ではないことがわかりました。少し複雑なプロジェクトでは、後から多くの落とし穴が発生することが予想されます。ステージ。そのため、フロントエンド CSS フレームワークとしてブートストラップが使用され、ポップアップ ウィンドウの作成にはモーダルなどのコンポーネントも多用されました。

手順 (3.3.4 以降の 3.x バージョンに基づく):

1. bootstrap.js ソース コードを開いてモーダル コンポーネントのコード ブロックを見つけ、モーダルの下にドラッグ アンド ドロップ コード実装を追加します。デフォルトのコードブロック。

Modal.DEFAULTS = {
 backdrop: true,
 keyboard: true,
 show: true
}
//新加入的拖拽
Modal.prototype.draggable = function () {
 var $ele = this.$element;
 var mouseOffset;
 var $modalDialog = $ele.find(".modal-dialog");
 var dialogOffset;

 $ele.find(".modal-header").on('mousedown', function (event) {
 $(this).addClass({cursor: 'move'});
 $('body').addClass('select');
 dialogOffset = $modalDialog.offset();
 mouseOffset = {
  top: event.pageY - dialogOffset.top,
  left: event.pageX - dialogOffset.left
 };
 $('body').on("mousemove", function (event) {
  var left = event.pageX - mouseOffset.left;
  var top = event.pageY - mouseOffset.top;
  if (left < 10) {
  left = 0;
  } else if (left > $(window).width() - $modalDialog.width()) {
  left = $(window).width() - $modalDialog.width();
  }
  if (top < 10) {
  top = 0;
  } else if (top > $(window).height() - $modalDialog.height()) {
  top = $(window).height() - $modalDialog.height();
  }
  $modalDialog.offset({
  top: top,
  left: left
  });
 });
 });

 $(document).on("mouseup mouseleave", function () {
 $(&#39;body&#39;).off("mousemove");
 });
}

2. modalのshowメソッドにdraggableメソッドを追加

Modal.prototype.show = function (_relatedTarget) {
    var that = this
    var e = $.Event('show.bs.modal', {relatedTarget: _relatedTarget})

    this.$element.trigger(e)

    if (this.isShown || e.isDefaultPrevented()) return

    this.isShown = true

    //调用draggable()增加拖拽
    this.draggable()
    this.checkScrollbar()
    this.setScrollbar()
    this.$body.addClass('modal-open')

    this.escape()
    this.resize()
    //......省略
}

上記の操作が完了したら、ドラッグをサポートするために変更したソースコードjsをページに直接導入すると、スコープ内でドラッグ全体が利用可能になりますビューウィンドウの境界を超えることはありません。

注意: 上記のソースコードの修正が完了したら、ブートストラップソースコードを圧縮してパッケージ化することをお勧めします。自動構築に慣れていない人は、それをオープンなWebサイトに配置して圧縮できます。構築には、gulp や webpack などのフロントエンド自動化ツールを使用して、ソース コードをパッケージ化して圧縮し、Web ページの読み込み時の帯域幅の使用量を削減するのが最適です。もちろん、このファイルが元のファイルとどのように異なるかを明確に推測できるように、ファイルに bootstrap-draggable.min.js のような名前を付けることもお勧めします。さらに、bootstrap3.x バージョンのソース コードを直接ダウンロードし、内部の modal.js を変更して、独自の grunt ビルドを使用して再パッケージ化することもできます。

問題が発生します: ブートストラップ 4.0 以降のバージョンのソース コードは、3.x バージョンと比較してモーダル コンポーネントに大きな変更が加えられていません。上記の方法も採用できます。モーダルを中央に配置するなど、ソース コードを変更して完成させることもできます。

上記は私があなたのためにまとめたものです。

関連記事:

WeChat ミニ プログラムのページ ライフ サイクルの詳細な解釈 (詳細なチュートリアル)

NProgress.js および NProgress.js で読み込み進行状況プラグインを使用する方法 (詳細なチュートリアル)

WeChat ミニ プログラム内 プログラム内のアプリのライフ サイクル (詳細なチュートリアル)

jQuery で NProgress.js 読み込み進行プラグインを使用する方法

以上がBootstrap のモーダルにドラッグ アンド ドロップ機能を追加する方法の詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。