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”）模态（）拖动（{手柄： “模态报头”}）。。