Introduction détaillée à l'ajout de la fonction glisser-déposer à Modal dans Bootstrap

Cet article présente principalement la méthode détaillée d'ajout du glisser-déposer à Bootstrap Modal. Maintenant, je le partage avec vous et le donne comme référence.

[Recommandations vidéo associées : Tutoriel Bootstrap]

Il existe de nombreuses implémentations par glisser-déposer pour Bootstrap Modal sur Internet, mais de nombreuses des codes semblent différents. L'encapsulation du sentiment complexe n'est peut-être pas très bonne, et certains utilisent même la fonction glisser-déposer de jquery ui, ce qui n'est pas ce que je veux. En fait, j'ajoutais la fonction glisser-déposer à Bootstrap. Modal lors de la Fête du Printemps 2017. , une année s'est écoulée en un clin d'œil. Lors de la Fête du Printemps 2017, certains collègues du projet précédent ont utilisé layer comme front-end, mais pour le développement back-end comme moi, qui connais un peu le front-end js, il m'a été difficile d'introduire un ensemble complet des choses comme layer et layui.Après avoir parcouru certains composants de layui, j'ai trouvé que les fonctions des composants ne sont pas très complètes. Il est prévisible que des projets légèrement plus complexes provoqueront de nombreux pièges à un stade ultérieur. . Par conséquent, bootstrap a été utilisé comme framework CSS frontal, et des composants tels que modal ont également été largement utilisés pour créer des fenêtres contextuelles.

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

1 Ouvrez le code source bootstrap.js pour trouver le bloc de code du composant modal, dans Modal, ajoutez une implémentation de code glisser-déposer sous le bloc de code .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");
 });
}

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

Après avoir terminé l'opération ci-dessus, introduisez directement le code source js qui vient d'être modifié sur la page. et tout ira bien. Le glisser-déposer est pris en charge, et l'intégralité 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 d'amorçage. Ceux qui ne sont pas familiers avec la construction automatique peuvent le mettre sur un site Web ouvert. Il est préférable pour ceux qui sont familiers avec la construction automatique de l'utiliser. Les outils d'automatisation front-end tels que gulp et webpack sont utilisés pour empaqueter et compresser le code source afin de réduire l'utilisation de la bande passante lors du 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.

Instigation du problème : Le code source de la version bootstrap 4.0+ n'a pas beaucoup de modifications dans le composant modal par rapport à la version 3.x. 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.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles associés :

Interprétation détaillée du cycle de vie des pages dans le mini programme WeChat (tutoriel détaillé)

pace.js et NProgress . js Comment utiliser le plug-in de progression du chargement (tutoriel détaillé)

À propos du cycle de vie de l'application dans l'applet WeChat (tutoriel détaillé)

dans jQuery À propos de l'utilisation du plug-in de progression du chargement de NProgress.js

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!