jquery - example - html5 draggable modal

hacer que el cuadro de diálogo de rutina de bootstrap sea arrastrable

Question

Estoy intentando hacer que el diálogo de arranque de twitter sea modal arrastrable con este plugin jquery:

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

pero no funciona.

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

¿Tienes idea de cómo puedo hacerlo?

Answer 1

Al igual que otros dijeron, la solución más simple es simplemente llamar a la función draggable() desde jQuery UI justo después de mostrar modal:

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

Pero hay varios problemas con la compatibilidad entre Bootstrap y jQuery UI, por lo que necesitamos algunas correcciones adicionales en css:

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

Answer 2

En mi caso, estoy habilitando la opción de arrastrar. Funciona.

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

Puede ser que te ayude.

Answer 3

En mi propio caso, tuve que establecer un backdrop y establecer las propiedades top e left antes de poder aplicar la función draggable en el cuadro de diálogo modal. Tal vez podría ayudar a alguien;)

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

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

Answer 4

La solución mejor clasificada (por Mizbah Ahsan) no está del todo bien ... pero está cerca. Si aplica arrasgable () al elemento de diálogo modal, las barras de desplazamiento de la ventana del navegador arrastrarán por la pantalla mientras arrastra el cuadro de diálogo modal. La forma de solucionar eso es aplicar draggable () a la clase modal-dialog en su lugar:

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

¡Gracias!

Answer 5

Puede utilizar el siguiente código si no desea utilizar la interfaz de usuario de jQuery o cualquier complemento de terceros. Es solo 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>

Answer 6

hice esto:

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

y hace que mi modo estándar / básico sea arrastrable.

no estoy seguro de cómo / por qué funcionó, pero lo hizo.

Answer 7

use el jquery UI arrastrable, mucho más simple http://jqueryui.com/draggable/

Answer 8

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

esto funciona para mi. Lo obtuve de there . si me das las gracias, da el 70% a Andres Ilich