ホームページ > 記事 > ウェブフロントエンド > Bootstrap Modal にドラッグアンドドロップメソッドを追加する例

Bootstrap Modal にドラッグアンドドロップメソッドを追加する例

小云云オリジナル: 2018-01-08 09:11:251412ブラウズ

この記事では、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(&#39;mousedown&#39;, function (event) {
 $(this).addClass({cursor: &#39;move&#39;});
 $(&#39;body&#39;).addClass(&#39;select&#39;);
 dialogOffset = $modalDialog.offset();
 mouseOffset = {
  top: event.pageY - dialogOffset.top,
  left: event.pageX - dialogOffset.left
 };
 $(&#39;body&#39;).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. モーダルのshowメソッドにドラッグ可能なメソッドを追加して呼び出します

Modal.prototype.show = function (_relatedTarget) {
    var that = this
    var e = $.Event(&#39;show.bs.modal&#39;, {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(&#39;modal-open&#39;)

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

上記の操作が完了したら、変更したばかりのソースコードjsをページに直接導入すると、すでにサポートされています。ドラッグは非常にうまく、ドラッグ全体はビジュアルウィンドウの範囲内にあり、境界を超えることはありません。

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

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

Bootstrap Modal にドラッグ アンド ドロップ メソッドを追加する例

関連記事

Bootstrap Modal にドラッグアンドドロップメソッドを追加する例