Javascript 使用Jquery UI使所有引导模式都可拖动

我读过一篇关于使Bootstrap的modals可拖动的帖子，我可以通过以下方式进行：

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

在页面上创建对话框的位置

问题是，我的系统中有很多对话框，我想让它们都可以拖动，而不必找到每个对话框实例并插入代码片段

有没有办法使所有对话框在默认情况下都可以拖动

我试过：

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

在我的全局脚本中，但它不起任何作用。

尝试一下：

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

更新

要使用可拖动插件动态创建元素，请使用

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

并将其用作

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

这对我很有用：

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

这将找到类为“modal”的所有html元素，并使它们可拖动

我使用了“.modal content”而不是“modal header”，因为我不希望用户在屏幕上拖得太远时被卡住。使用“.modal content”，他们可以将其从模态的底部拖回

请注意，您必须使用jQueryUI才能工作

使用document.ready（）确保在应用此代码之前加载所有模态

如果您像我一样使用AngularJS，并且有多个控制器和视图，或者不是所有的模态最初都在DOM中可用，那么您可以在每个模态div上使用ng init来调用使其可拖动的函数

HTML:

---

问题是，对话框的标记不存在，而是动态添加到DOM中。另一方面，如果页面上可能使用的所有对话框都已经在DOM中并被隐藏，而不是动态加载HTML，通常会更好吗？不幸的是，我得到了一个错误：uncaughttypeerror:object不是一个函数

<div class="modal" ng-init="makeDraggable()">

$rootScope.makeDraggable = function () {
            $('.modal').draggable({
                handle: ".modal-content"
            });
            $('.modal').addClass('click');
        };