web-dev-qa-db-ja.com

Twitter Bootstrap Modal Form：ドラッグアンドドロップの方法は？

Bootstrap 2。これを達成するのは？

drag-and-droptwitter-bootstrap
40
AndraD

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

これを試して：

[〜＃〜] js [〜＃〜]

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

デモ 、編集 ここ 。

更新： bootstrap3 demo

84
Andres Ilich

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

8
user535673

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

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

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

3
user4936321

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

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

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

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

0
Bryan Larsen