web-dev-qa-db-fra.com

Twitter Bootstrap Forme modale: comment faire glisser et déposer?

J'aimerais pouvoir me déplacer (sur le fond grisé, en faisant glisser et en déposant) la forme modale fournie par Bootstrap 2. Quelqu'un peut-il me dire quelle est la meilleure pratique pour atteindre cet objectif est?

drag-and-droptwitter-bootstrap
40
AndraD

Le bootstrap ne vient pas avec une fonctionnalité de glisser-déposer par défaut, mais vous pouvez ajouter un peu d'épice jQuery UI dans le mix pour obtenir l'effet que vous recherchez. Par exemple, en utilisant l'interaction draggable à partir du framework, vous pouvez cibler votre ID modal pour lui permettre d'être glissé dans le contexte modal.

Essaye ça:

[~ # ~] js [~ # ~] 

$("#myModal").draggable({
    handle: ".modal-header"
});

Démo , éditez ici .

Mise à jour: démo bootstrap

84
Andres Ilich

Quelle que soit l'option que vous choisissez, vous pouvez désactiver la fonction *-transition propriétés pour .modal.fade dans le fichier CSS de bootstrap, ou au moins écrire du JS qui les désactive temporairement pendant le glissement. Sinon, le modal ne glisse pas exactement comme prévu.

8
user535673

Vous pouvez utiliser un petit script comme celui-ci.

simplifié de Draggable sans jQuery UI

    (function ($) {
        $.fn.drags = function (opt) {

            opt = $.extend({
                handle: "",
                cursor: "move"
            }, opt);

            var $selected = this;
            var $elements = (opt.handle === "") ? this : this.find(opt.handle);

            $elements.css('cursor', opt.cursor).on("mousedown", function (e) {
                var pos_y = $selected.offset().top - e.pageY,
                  pos_x = $selected.offset().left - e.pageX;
                $(document).on("mousemove", function (e) {
                    $selected.offset({
                        top: e.pageY + pos_y,
                        left: e.pageX + pos_x
                    });
                }).on("mouseup", function () {
                    $(this).off("mousemove"); // Unbind events from document                
                });
                e.preventDefault(); // disable selection
            });

            return this;

        };
    })(jQuery);

exemple: $ ("# someDlg"). modal (). drags ({handle: ". modal-header"});

3
user4936321

l'interface utilisateur jquery est volumineuse et peut entrer en conflit avec le bootstrap.

Une alternative est DragDrop.js: http://kbjr.github.io/DragDrop/index.html

DragDrop.bind($('#myModal')[0], {
  anchor: $('#myModal .modal-header')
});

Vous devez toujours gérer les transitions, comme le suggère @ user535673. Je supprime simplement la classe de fondu de ma boîte de dialogue.

0
Bryan Larsen