57

このjqueryプラグインを使用して、ブートストラップTwitterダイアログモーダルをドラッグ可能にしようとしています:

http://threedubmedia.com/code/event/drag#demos

しかし、うまくいきません。

var $div = $('html');
console.debug($('.drag'));
$('#modalTest')
    .drag("start", function(ev, dd) {
        dd.limit = $div.offset();
        dd.limit.bottom = dd.limit.top + $div.outerHeight() - $(this).outerHeight();
        dd.limit.right = dd.limit.left + $div.outerWidth() - $(this).outerWidth();
    })
    .drag(function(ev, dd) {
        $(this).css({
            top: Math.min(dd.limit.bottom, Math.max(dd.limit.top, dd.offsetY))
            , left: Math.min(dd.limit.right, Math.max(dd.limit.left, dd.offsetX))
        });
    });

どうすればそれができるか分かりますか？

4

10 に答える 10

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

わたしにはできる。私はそこからそれを手に入れました。感謝するなら、アンドレス・イリッヒに70%を寄付してください

于 2013-02-20T14:00:48.023 に答える
55

jQuery UI やサードパーティのプラグインを使用したくない場合は、以下のコードを使用できます。それは単なるjQueryです。

この回答は Bootstrap v3.x でうまく機能します。バージョン 4.x については、以下の @User コメントを参照してください。

$(".modal").modal("show");

$(".modal-header").on("mousedown", function(mousedownEvt) {
    var $draggable = $(this);
    var x = mousedownEvt.pageX - $draggable.offset().left,
        y = mousedownEvt.pageY - $draggable.offset().top;
    $("body").on("mousemove.draggable", function(mousemoveEvt) {
        $draggable.closest(".modal-dialog").offset({
            "left": mousemoveEvt.pageX - x,
            "top": mousemoveEvt.pageY - y
        });
    });
    $("body").one("mouseup", function() {
        $("body").off("mousemove.draggable");
    });
    $draggable.closest(".modal").one("bs.modal.hide", function() {
        $("body").off("mousemove.draggable");
    });
});
.modal-header {
    cursor: move;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div>

于 2018-08-13T14:06:14.523 に答える
32

上位にランクされたソリューション (Mizbah Ahsan による) は、完全には正しくありませんが、それに近いものです。モーダル ダイアログ要素に draggable() を適用すると、モーダル ダイアログをドラッグすると、ブラウザ ウィンドウのスクロール バーが画面上をドラッグします。これを修正する方法は、代わりに draggable() を modal-dialog クラスに適用することです:

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

ありがとう！

于 2016-08-24T14:36:26.387 に答える
6

ドラッグ可能な jquery UI を使用して、はるかに簡単に http://jqueryui.com/draggable/

于 2012-10-19T20:08:46.887 に答える
5

これは私がしました：

$("#myModal").modal({}).draggable();

そして、それは私の非常に標準/基本的なモーダルをドラッグ可能にします。

どのように/なぜそれが機能したかはわかりませんが、機能しました。

于 2015-02-05T21:18:27.763 に答える
3

マウス カーソルの場合 (jQuery UI を使用):

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

タッチ カーソルの場合 (jQuery を使用):

var box = null;
var touchobj = null;
var position = {'x':0, 'y':0};
var positionbox = {'x':0, 'y':0};

// init touch
$('.modal-header').on('touchstart', function(e){
    box = $(this).closest('.modal-dialog');
    touchobj = e.changedTouches[0];

    // take position touch cursor
    position['x'] = touchobj.pageX;
    position['y'] = touchobj.pageY;

    //take original position box to move with touch
    positionbox['x'] = parseInt(box.css('left'));
    positionbox['y'] = parseInt(box.css('top'));

    e.preventDefault();
});

// on move touch
$('.modal-header').on('touchmove', function(e){
    var dist = {'x':0, 'y':0};
    touchobj = e.changedTouches[0];

    // we calculate the distance of move
    dist['x'] = parseInt(touchobj.clientX) - position['x'];
    dist['y'] = parseInt(touchobj.clientY) - position['y'];

    // we apply the movement distance on the box
    box.css('left', positionbox['x']+dist['x'] +"px");
    box.css('top', positionbox['y']+dist['y'] +"px");

    e.preventDefault();
});

2つのソリューションの追加は互換性があります

于 2019-07-09T11:09:47.653 に答える