ブートストラップでコンポーネントをドラッグ アンド ドロップする方法

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

1. ブートストラップ検索を開く.js ソース コードのモーダル コンポーネント コード ブロックを作成し、Modal.DEFAULTS コード ブロックの下にコードをドラッグ アンド ドロップして実装します。

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");
 });
}

関連する推奨事項: 「Bootstrap 入門チュートリアル 」

2. modal

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()
    //......省略
}

の show メソッドにドラッグ可能なメソッドを追加して呼び出します。上記の操作を完了します。 変更したばかりのソース コード js を直接導入した後、ページはすでにドラッグ アンド ドロップを非常に適切にサポートすることができ、ドラッグ アンド ドロップ全体がビジュアル ウィンドウの範囲内にあり、境界を超えることはありません。

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

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

以上がブートストラップでコンポーネントをドラッグ アンド ドロップする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。