So ziehen Sie Komponenten per Drag & Drop in Bootstrap

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

1. Öffnen Sie Bootstrap Find Fügen Sie den Codeblock der modalen Komponente im .js-Quellcode hinzu und fügen Sie Drag-and-Drop-Code unter dem Codeblock Modal.DEFAULTS hinzu, um ihn zu implementieren.

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

Verwandte Empfehlungen: „Bootstrap Getting Started Tutorial“

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

, um den Vorgang abzuschließen Die oben genannten Vorgänge Nach der direkten Einführung des gerade geänderten Quellcodes js kann die Seite Drag & Drop bereits sehr gut unterstützen, 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 zur Komprimierung auf eine offene Website stellen Bei automatischer Erstellung verwenden Sie am besten Frontends wie Gulp und WebPack. Automatisierte Tools zum Packen und Komprimieren des Quellcodes, 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.

Das Problem tritt auf: Im Vergleich zur Version 3.x weist der Quellcode der Bootstrap-Version 4.0+ keine großen Änderungen an der modalen Komponente 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.

Das obige ist der detaillierte Inhalt vonSo ziehen Sie Komponenten per Drag & Drop in Bootstrap. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!