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