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

この記事では、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. モーダルのshowメソッドにドラッグ可能なメソッドを追加して呼び出します

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 バージョンと比較してモーダル コンポーネントに大きな変更が加えられていません。上記の方法も採用できます。モーダルを中央に配置するなど、ソース コードを変更して完成させることもできます。

関連する推奨事項:

JSで実装されたシンプルなドラッグアンドドロップショッピングカート機能

TP5はWebuploaderを統合してプレビューのドラッグアンドドロップ検索と削除を実装

zTreeプラグを使用したjQueryの例の説明-in ドラッグアンドドロップ機能を実装します

以上がBootstrap Modal にドラッグ アンド ドロップ メソッドを追加する例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。