Make all bootstrap modals draggable using Jquery UI

Question

I have read a post regarding making Bootstrap's modals draggable which I can do by calling:

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

Where the dialog is created on the page.

The problem is, is that I have many dialogs throughout my system and I want to make them all draggable, without having to find every dialog instance and dropping in that code snippet.

Is there a way to make all dialogs draggable by default?

I have tried:

$('.modal').on('show', function(){
  $(this).draggable({
      handle: ".modal-header"
    });
})

In my global script, but it does nothing.

Answer 1

Try It:

$(document).ready(function() {
    $(".modal").each(function(i) {
        $(this).draggable({
            handle: ".modal-header"  
        });
    });
});

UPDATE

To use draggable plugin to dynamically created element use

(function ($) {
   $.fn.dynamicDraggable = function (opts) {
      this.live("mouseover", function() {
         if (!$(this).data("init")) {
            $(this).data("init", true).draggable(opts);
         }
      });
      return this;
   };
}(jQuery));

And use it as

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