Twitter Bootstrap Модальная форма: как перетаскивать?

Ответ 1

Загрузочный загрузчик по умолчанию не имеет никаких перетаскивающих функций, но вы можете добавить немного jQuery UI spice в микс, чтобы получить эффект, который вы ищете. Например, используя draggable взаимодействие с каркасом, вы можете настроить таргетинг своего модального идентификатора, чтобы он можно было перемещать в рамках модального фона.

Попробуйте следующее:

JS

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

Демо, отредактируйте здесь.

Обновление: демо-версия bootstrap3

Ответ 2

Какой бы вариант перетаскивания вы ни выбрали, вы можете отключить свойства *-transition для .modal.fade в файле CSS bootstraps или, по крайней мере, записать некоторый JS, который временно отключает их во время перетаскивания. В противном случае модально не будет тащить точно так, как вы ожидали.

Ответ 3

Вам может понравиться немного script.

упрощено из Перетаскивание без пользовательского интерфейса jQuery

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

Ответ 4

jquery UI большой и может противоречить загрузке.

Альтернативой является DragDrop.js: http://kbjr.github.io/DragDrop/index.html

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

Вам все равно придется иметь дело с переходами, как предлагает @user535673. Я просто удаляю класс fade из своего диалога.