Twitter Bootstrap模態窗體：如何拖放？

Question

我希望能夠在Bootstrap 2中移動（在灰色背景下拖放）Bootstrap 2提供的模式窗體。任何人都可以告訴我實現此目的的最佳做法是什麼？

Answer 1

默認情況下，引導程序沒有提供任何拖放功能，但您可以在混合中添加一些jQuery UI spice來獲得您要查找的效果。例如，使用框架中的draggable交互，您可以定位您的模式ID以允許它在模式背景中拖動。

試試這個：

JS

​​

Demo，編輯here。

更新：bootstrap3 demo

Answer 2

無論拖動選項你去，你可能要在引導的CSS文件關閉*-transition屬性.modal.fade，或至少寫一些JS說拖動過程中暫時禁用它們。否則，模式不會像您期望的那樣完全拖動。

Answer 3

jquery的用戶界面很大，可能會與bootstrap衝突。

另一種方法是DragDrop.js：http://kbjr.github.io/DragDrop/index.html

DragDrop.bind($('#myModal')[0], { 
    anchor: $('#myModal .modal-header') 
}); 

你仍然必須處理的轉變，如@ user535673建議。我只是從我的對話框中刪除淡化類。

Answer 4

你可以使用一個小腳本來做這個。

從Draggable without jQuery UI

(function ($) { 
     $.fn.drags = function (opt) { 

      opt = $.extend({ 
       handle: "", 
       cursor: "move" 
      }, opt); 

      var $selected = this; 
      var $elements = (opt.handle === "") ? this : this.find(opt.handle); 

      $elements.css('cursor', opt.cursor).on("mousedown", function (e) { 
       var pos_y = $selected.offset().top - e.pageY, 
        pos_x = $selected.offset().left - e.pageX; 
       $(document).on("mousemove", function (e) { 
        $selected.offset({ 
         top: e.pageY + pos_y, 
         left: e.pageX + pos_x 
        }); 
       }).on("mouseup", function() { 
        $(this).off("mousemove"); // Unbind events from document     
       }); 
       e.preventDefault(); // disable selection 
      }); 

      return this; 

     }; 
    })(jQuery); 

例子被簡化了：$（ 「＃someDlg」）模態（）拖動（{手柄： 「模態報頭」}）。。