43

Bootstrap 2が提供するモーダルフォームを（灰色の背景でドラッグアンドドロップして）移動できるようにしたいと思います。これを実現するためのベストプラクティスを教えてください。

4

5 に答える 5

92

ブートストラップにはデフォルトでドラッグアンドドロップ機能はありませんが、jQuery UIスパイスを少し追加して、探している効果を得ることができます。たとえばdraggable、フレームワークからのインタラクションを使用して、モーダルIDをターゲットにして、モーダル背景内でドラッグできるようにすることができます。

これを試して：

JS

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

デモ、ここで編集。

更新：bootstrap3デモ

于 2012-09-25T22:41:14.447 に答える
9

*-transitionドラッグ可能なオプションが何であれ、ブートストラップのCSSファイルでのプロパティをオフにする.modal.fadeか、少なくともドラッグ中に一時的に無効にするJSを作成することをお勧めします。そうしないと、モーダルは期待どおりに正確にドラッグされません。

于 2013-02-03T11:26:25.913 に答える
3

このような小さなスクリプトを使用できます。

jQueryUIなしでDraggableから簡略化

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

例：$（ "＃someDlg"）。modal（）。drags（{handle： "。modal-header"}）;

于 2015-05-25T09:46:56.547 に答える
1

jQuery UIを利用した以前の回答に基づいて、これは1回含まれ、すべてのモーダルに適用され、モーダルを画面に表示したままにするため、ユーザーが誤ってヘッダーを画面から移動してハンドルにアクセスできなくなることはありません。また、発見しやすくするためにカーソルを「移動」に設定します。

$(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実際の背後にある.modal半透明のオーバーレイ.modal-contentです。

于 2021-02-11T21:08:37.923 に答える
0

jquery UIは大きく、ブートストラップと競合する可能性があります。

別の方法はDragDrop.jsです：http： //kbjr.github.io/DragDrop/index.html

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

@ user535673が示唆するように、まだ遷移に対処する必要があります。ダイアログからフェードクラスを削除するだけです。

于 2014-07-03T19:58:10.570 に答える