web-dev-qa-db-fra.com

rendre la boîte de dialogue Twitter modale déplaçable

J'essaie de rendre modal dragable de dialogue Twitter bootstrap avec ce plugin jquery:

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

mais ça ne marche pas.

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

Avez-vous une idée de comment puis-je le faire?

jquerytwitter-bootstrapmodal-dialogdraggable
39
paganotti
$("#myModal").draggable({
    handle: ".modal-header"
});

ça marche pour moi. Je l'ai eu de là . si vous me donnez merci s'il vous plaît donnez 70% à Andres Ilich

80
Mizbah Ahsan

La solution la mieux classée (par Mizbah Ahsan) n’est pas tout à fait juste… mais est proche. Si vous appliquez l'option draggable () à l'élément de la boîte de dialogue modale, les barres de défilement de la fenêtre du navigateur glissent sur l'écran tout en faisant glisser la boîte de dialogue modale. Pour résoudre ce problème, appliquez draggable () à la classe de dialogue modal:

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

Merci!

24
IdahoB

Vous pouvez utiliser le code ci-dessous si vous ne souhaitez pas utiliser l'interface utilisateur de jQuery ou un plug-in tiers. Ce n'est que jQuery plaine.

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

9
Below the Radar

Comme d'autres l'ont dit, la solution la plus simple consiste simplement à appeler la fonction draggable() à partir de jQuery UI juste après avoir affiché modal:

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

Mais il y a plusieurs problèmes de compatibilité entre Bootstrap et jQuery UI nous avons donc besoin de quelques corrections supplémentaires dans css:

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

utilisez l'interface utilisateur jquery déplaçable, beaucoup plus simple http://jqueryui.com/draggable/

6
Slim Fadi

j'ai fait ça:

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

et cela rend mon modal très standard/basique glissable.

je ne sais pas comment/pourquoi cela a fonctionné, mais ça a fonctionné.

3
Gordon

Dans mon cas, je suis en train d’activer. Ça marche.

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

Peut-être que cela vous aide.

0
Jugal Panchal

Dans mon cas, je devais définir backdrop et définir les propriétés top et left avant de pouvoir appliquer la fonction draggable dans la boîte de dialogue modale. Peut-être que cela pourrait aider quelqu'un;)

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

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