Detaillierte Einführung zum Hinzufügen der Drag-and-Drop-Funktion zu Modal in Bootstrap

In diesem Artikel wird hauptsächlich die detaillierte Methode zum Hinzufügen von Drag & Drop zu Bootstrap Modal vorgestellt. Jetzt teile ich sie mit Ihnen und gebe sie als Referenz.

[Ähnliche Videoempfehlungen: Bootstrap-Tutorial]

Es gibt viele Drag-and-Drop-Implementierungen für Bootstrap Modal im Internet, aber viele Einige der Codes sehen anders aus. Die Kapselung des komplexen Gefühls ist möglicherweise nicht sehr gut, und einige verwenden sogar die Drag-and-Drop-Funktion von jquery ui. Tatsächlich habe ich die Drag-and-Drop-Funktion zu Bootstrap hinzugefügt Modal während des Frühlingsfestes 2017. Ein Jahr verging wie im Flug. Während des Frühlingsfestes 2017 verwendeten einige Kollegen im vorherigen Projekt Layer als Front-End, aber für mich, der ein wenig über js Front-End für die Back-End-Entwicklung verfügt, war es schwierig, ein Ganzes vorzustellen Eine Reihe von Dingen wie Layer und Lauii. Nachdem ich einige Komponenten von Laui durchgesehen hatte, stellte ich fest, dass die Funktionen der Komponenten nicht sehr vollständig sind. Es ist vorhersehbar, dass etwas komplexere Projekte später viele Fallstricke verursachen werden Bühne. Daher wurde Bootstrap als Front-End-CSS-Framework verwendet, und Komponenten wie Modal wurden auch häufig zum Erstellen von Popup-Fenstern verwendet.

Schritte (basierend auf 3.3.4 oder höher 3.x-Version):

1. Öffnen Sie den Bootstrap.js-Quellcode, um den Codeblock der modalen Komponente zu finden. Fügen Sie in Modal eine Drag-and-Drop-Code-Implementierung unter dem .DEFAULTS-Codeblock hinzu.

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. Fügen Sie die ziehbare Methode in der Show-Methode des Modals hinzu.

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

Fügen Sie nach Abschluss des obigen Vorgangs den gerade geänderten Quellcode js direkt in die Seite ein, und er kann bereits unterstützt werden Ziehen gut, und das gesamte Ziehen liegt im Bereich des visuellen Fensters und wird die Grenze nicht überschreiten.

Hinweis: Nach Abschluss der oben genannten Quellcode-Änderung ist es am besten, den Bootstrap-Quellcode zu komprimieren und zu verpacken. Wer mit der automatischen Erstellung nicht vertraut ist, kann ihn auf eine offene Website stellen Wer sich mit der automatischen Erstellung auskennt, nutzt am besten Frontend-Automatisierungstools wie gulp und webpack, um den Quellcode zu verpacken und zu komprimieren, um die Bandbreitennutzung beim Laden von Webseiten zu reduzieren. Natürlich empfiehlt es sich auch, der Datei einen Namen wie „bootstrap-draggable.min.js“ zu geben, damit Sie deutlich erkennen können, wie sich diese Datei von der Originaldatei unterscheidet. Darüber hinaus können Sie den Quellcode der Bootstrap3.x-Version auch direkt herunterladen, dann die darin enthaltene modal.js ändern und dann einen eigenen Grunt-Build zum Neupacken verwenden.

Auslöser des Problems: Der Quellcode der Bootstrap-Version 4.0+ weist im Vergleich zur 3.x-Version keine großen Änderungen an der Modalkomponente auf. Die obige Methode kann ebenfalls verwendet werden . Einschließlich der Zentrierung des Modals können Sie auch den Quellcode ändern, um ihn zu vervollständigen.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Detaillierte Interpretation des Seitenlebenszyklus im WeChat-Miniprogramm (ausführliches Tutorial)

pace.js und NProgress . js So verwenden Sie das Ladefortschritts-Plug-in (ausführliches Tutorial)

Über den App-Lebenszyklus im WeChat-Applet (ausführliches Tutorial)

in jQuery Über die Verwendung des Ladefortschritts-Plug-ins NProgress.js

Das obige ist der detaillierte Inhalt vonDetaillierte Einführung zum Hinzufügen der Drag-and-Drop-Funktion zu Modal in Bootstrap. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!