javascript - 使用 Jquery UI 使所有引导模式可拖动

Question

我已经阅读了一篇关于使 Bootstrap 的模态可拖动的帖子，我可以通过调用来做到这一点：

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

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

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

有没有办法让所有对话框默认可拖动？

我试过了：

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

在我的全局脚本中，但它什么也不做。

Answer 1

尝试一下：

$(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"  
});

Answer 2

这对我有用：

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

这将找到所有具有“模态”类的 html 元素并使它们可拖动。

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

请注意，您必须使用 Jquery UI 才能工作。

使用 document.ready() 确保在应用此代码之前加载所有模式。

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

HTML：

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

Javascript：

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