Bootstrap Modal fügt ein Beispiel für eine Drag-and-Drop-Methode hinzu

In diesem Artikel wird hauptsächlich die detaillierte Methode zum Hinzufügen von Drag & Drop zu Bootstrap Modal vorgestellt. Der Herausgeber findet sie recht gut, daher werde ich sie jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Es gibt viele Drag-and-Drop-Implementierungen für Bootstrap Modal im Internet, aber viele der Codes sehen kompliziert aus und die Kapselung ist möglicherweise nicht sehr gut. Einige verwenden sogar die Drag-and-Drop-Funktion von jquery ui. Was ich will, ist, dass ich während des Frühlingsfestes 2017 die Drag-and-Drop-Funktionalität hinzugefügt habe, und ein Jahr verging wie im Flug. Während des Frühlingsfestes 2017 verwendeten einige Kollegen im vorherigen Projekt Layer als Frontend, aber für eine Back-End-Entwicklung wie mich, die ein wenig über js Frontend-Kenntnisse verfügt, war es für mich schwierig, einen ganzen Satz einzuführen Früher war es ungefähr so, dass einige Komponenten von Lauii durchsucht wurden. Es ist vorhersehbar, dass etwas komplexere Projekte in der späteren Phase viele Fallstricke verursachen werden . 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 und rufen Sie sie auf

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

Schließen Sie den oben genannten Vorgang ab. Durch direktes Einfügen der neu geänderten Quellcode-JS auf der Seite kann Drag & Drop bereits sehr gut unterstützt werden, und das gesamte Drag & Drop liegt im Bereich des visuellen Fensters und überschreitet die Grenze nicht.

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 Front-End-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 Version 3.x 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.

Verwandte Empfehlungen:

JS-implementierte einfache Drag-and-Drop-Warenkorbfunktion

TP5 integriert einen Webuploader zur Implementierung Vorschau Drag-and-Drop-Suche Löschen

Beispiel zur Erläuterung, wie jQuery das zTree-Plug-in verwendet, um Drag-and-Drop-Funktionalität zu implementieren

Das obige ist der detaillierte Inhalt vonBootstrap Modal fügt ein Beispiel für eine Drag-and-Drop-Methode hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!