Сделать диалоговое окно bootstrap twitter modal draggable

Ответ 1

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

он работает для меня. Я получил его из там. если вы дадите мне спасибо, пожалуйста, дайте 70% Андресу Ильичу

Ответ 2

Топ-ранжированное решение (Мизбахом Ашаном) не совсем верно... но близко. Если вы примените draggable() к элементу модального диалога, полосы прокрутки окна браузера будут перемещаться по экрану при перетаскивании модального диалога. Способ исправления заключается в применении draggable() к классу модального диалога:

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

Спасибо!

Ответ 3

Вы можете использовать приведенный ниже код, если вы не хотите использовать jQuery UI или любой сторонний плагин. Это всего лишь простой jQuery.

$(".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>

Ответ 4

Как и другие, самое простое решение - просто вызвать функцию draggable() из пользовательского интерфейса jQuery сразу после показа модальности:

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

Но есть несколько проблем с совместимостью между Bootstrap и jQuery UI, поэтому нам нужны некоторые исправления для добавления в css:

.modal
{
    overflow: hidden;
}
.modal-dialog{
    margin-right: 0;
    margin-left: 0;
}
.modal-header{      /* not necessary but imo important for user */
    cursor: move;
}

Ответ 5

использовать jquery UI draggable, намного проще http://jqueryui.com/draggable/

Ответ 6

Я сделал это:

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

и это делает мою стандартную/базовую модальную перетаскиваемую.

не уверен, как/почему он работал, но он это сделал.

Ответ 7

В моем собственном случае мне пришлось установить backdrop и свойства top и left прежде чем я смог применить draggable функцию в модальном диалоге. Может быть, это может кому-то помочь;)

if (!($('.modal.in').length)) {       
$('.modal-dialog').css({
     top: 0,
     left: 0
   });
}
$('#myModal').modal({
  backdrop: false,
   show: true
});

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

Ответ 8

Для курсора мыши (с 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();
});

Добавление двух решений совместимо

Ответ 9

В моем случае я могу использовать draggable. Он работает.

var bootstrapDialog = new BootstrapDialog({
    title: 'Message',
    draggable: true,
    closable: false,
    size: BootstrapDialog.SIZE_WIDE,
    message: 'Hello World',
    buttons: [{
         label: 'close',
         action: function (dialogRef) {
             dialogRef.close();
         }
     }],
});
bootstrapDialog.open();

Возможно, вам это поможет.