CODEWITHSUNDEEP
drag-and-droptwitter-bootstrap
AndraD
AndraD

Reputation: 2850

Twitter Bootstrap Modal Form: How to drag and drop?

I would like to be able to move around (on the greyed-out background, by dragging and dropping) the modal form that is provided by Bootstrap 2. Can anyone tell me what the best practice for achieving this is?

Upvotes: 45

Views: 56368

Answers (5)

Felix Böhme
Felix Böhme

Reputation: 518

Building on previous answers utilizing jQuery UI, this, included once, will apply to all your modals and keep the modal on screen, so users don't accidentally move the header off screen so they can no longer access the handle. Also sets the cursor to 'move' for better discoverability.

$(document).on('shown.bs.modal', function(evt) {
    let $modal = $(evt.target);
    $modal.find('.modal-content').draggable({
        handle: ".modal-header",
        containment: $modal
    });
    $modal.find('.modal-header').css('cursor', 'move')
});

evt.target is the .modal which is the translucent overlay behind the actual .modal-content.

Upvotes: 1

Andres I Perez
Andres I Perez

Reputation: 75399

The bootstrap doesn't come with any dragging and dropping functionality by default, but you can add a little jQuery UI spice into the mix to get the effect you're looking for. For example, using the draggable interaction from the framework you can target your modal ID to allow it to be dragged around within the modal backdrop.

Try this:

JS

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

Demo, edit here.

Update: bootstrap3 demo

Upvotes: 91

user4936321
user4936321

Reputation: 31

You can use a little script likes this.

simplified from Draggable without 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);

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

Upvotes: 3

Bryan Larsen
Bryan Larsen

Reputation: 10006

jquery UI is large and can conflict with bootstrap.

An alternative is DragDrop.js: http://kbjr.github.io/DragDrop/index.html

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

You still have to deal with transitions, as @user535673 suggests. I just remove the fade class from my dialog.

Upvotes: 0

user535673
user535673

Reputation: 912

Whatever draggable option you go for, you might want to turn off the *-transition properties for .modal.fade in bootstrap’s CSS file, or at least write some JS that temporarily disables them during dragging. Otherwise, the modal doesn’t drag exactly as you would expect.

Upvotes: 9

Related Questions