Twitter Bootstrap模态窗体：如何拖放？

我希望能够在Bootstrap 2中移动（在灰色的背景上，通过拖放）模式forms。谁能告诉我实现这个的最佳实践是什么？

Answer 1

引导程序默认没有任何拖放function，但是您可以添加一些jQuery UI spice到混合中以获得您要查找的效果。 例如，使用框架中的draggable交互，您可以定位您的模式ID以允许在模式背景中拖动它。

尝试这个：

JS

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

演示 ， 在这里编辑。

更新： bootstrap3演示

Answer 2

无论您select哪种可拖动选项，您可能都需要closuresbootstrap CSS文件中的.modal.fade的*-transition .modal.fade属性，或者至less编写一些在拖动过程中暂时禁用它们的JS。 否则，模式不会像您期望的那样完全拖动。

Answer 3

你可以使用这个小脚本。

从没有jQuery UI的Draggable简化

  (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”）。modal（）。drags（{handle：“。modal-header”}）;

Answer 4

jQuery的UI是大的，可以与引导冲突。

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

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

@ user535673表明，你仍然需要处理转换。 我只是从我的对话框中删除淡出类。