Twitter Bootstrap模态窗体:如何拖放?

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

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

尝试这个:

JS

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

演示 , 在这里编辑。

更新: bootstrap3演示

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

你可以使用这个小脚本。

从没有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”});

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

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

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

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