Bootstrap Modal ajoute un exemple de méthode glisser-déposer

Cet article présente principalement la méthode détaillée d'ajout du glisser-déposer à Bootstrap Modal. L'éditeur pense que c'est assez bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur et jetons un œil. J'espère que cela pourra aider tout le monde.

Il existe de nombreuses implémentations glisser-déposer pour Bootstrap Modal sur Internet, mais la plupart des codes semblent compliqués et l'encapsulation peut ne pas être très bonne. Certains utilisent même la fonction glisser-déposer de jquery. ui. Ce ne sont pas les miens. Ce que je veux, en fait, j'ajoutais des fonctionnalités de glisser-déposer à Bootstrap Modal pendant la Fête du Printemps 2017, et 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 moi, qui connais un peu le front-end js pour le développement back-end, il m'a été difficile d'introduire un tout un ensemble de 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 dans la suite. scène. 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 la méthode déplaçable à la méthode d'affichage 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 le ci-dessus Après l'opération, l'introduction directe du code source js nouvellement modifié sur la page peut déjà très bien prendre en charge 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 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 le 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.

Recommandations associées :

Fonction de panier simple par glisser-déposer implémentée par JS

TP5 intègre webuploader pour implémenter aperçu de la recherche par glisser-déposer Supprimer

Exemple pour expliquer comment jQuery utilise le plug-in zTree pour implémenter la fonctionnalité glisser-déposer

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!