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

<强>更新

使用draggable插件动态创建元素使用

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

使用Jquery UI使所有引导模态可拖动

2 个答案: