Comment glisser et déposer des composants dans bootstrap

Étapes (basées sur la version 3.3.4 ou supérieure 3.x) :

Ouvrir bootstrap Find le bloc de code du composant modal dans le code source .js, et ajoutez du code glisser-déposer sous le bloc de code Modal.DEFAULTS pour l'implémenter.

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

Recommandations associées : "Tutoriel de démarrage de Bootstrap"

2 Ajoutez et appelez la méthode draggable dans la méthode show du 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()
    //......省略
}

pour terminer. les opérations ci-dessus Après avoir directement introduit le code source js qui vient d'être modifié, la page peut déjà très bien supporter le glisser-déposer, et l'ensemble du glisser-déposer est dans la portée de la fenêtre visuelle et ne dépassera pas la limite.

Remarque : après avoir terminé la modification du code source ci-dessus, il est préférable de compresser et de conditionner le code source du bootstrap. Ceux qui ne sont pas familiers avec la construction automatique peuvent le mettre sur un site Web ouvert pour le compresser. avec la construction automatique, il est préférable d'utiliser des outils frontaux tels que gulp et webpack pour empaqueter et compresser le code source afin de réduire l'utilisation de la bande passante pendant le chargement des pages Web. Bien sûr, il est également recommandé de nommer le fichier comme bootstrap-draggable.min.js afin que vous puissiez clairement deviner en quoi ce fichier est différent du fichier d'origine. De plus, vous pouvez également télécharger directement le code source de la version bootstrap3.x, puis modifier le modal.js à l'intérieur, puis utiliser sa propre version grunt pour reconditionner.

Le problème se pose : par rapport à la version 3.x, le code source de la version bootstrap 4.0+ n'a pas beaucoup de modifications sur le composant modal. La méthode ci-dessus peut également être utilisée. Y compris en centrant le modal, vous pouvez également modifier le code source pour le compléter.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!