rendre le dialog de bootstrap twitter modal déplaçable

J’essaie de rendre modal dragable de dialog bootstrap twitter 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?

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

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

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 dialog modale, les barres de défilement de la fenêtre du navigateur glissent sur l’écran tout en faisant glisser la boîte de dialog modale. Pour résoudre ce problème, appliquez draggable () à la classe de dialog modal:

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

Merci!

utiliser l’interface utilisateur jquery draggable, beaucoup plus simple http://jqueryui.com/draggable/

Comme d’autres l’ont dit, la solution la plus simple consiste à appeler la fonction draggable() partir de l’ interface utilisateur jQuery 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; }

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

         Modal title
 
  One fine body…

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é

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.

Dans mon cas, je devais définir le backdrop et définir les propriétés top et left avant de pouvoir appliquer une fonction draggable sur la boîte de dialog 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" });