twitter-bootstrap Twitter Bootstrap Modal Form：如何拖放？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12591597/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Twitter Bootstrap Modal Form: How to drag and drop?
提问by AndraD
I would like to be able to move around (on the greyed-out background, by dragging and dropping) the modal form that is provided by Bootstrap 2. Can anyone tell me what the best practice for achieving this is?
我希望能够移动（在灰色背景上，通过拖放）Bootstrap 2 提供的模态表单。谁能告诉我实现这一目标的最佳实践是什么？
回答by Andres Ilich
The bootstrap doesn't come with any dragging and dropping functionality by default, but you can add a little jQuery UI spice into the mix to get the effect you're looking for. For example, using the draggableinteraction from the framework you can target your modal ID to allow it to be dragged around within the modal backdrop.
默认情况下，引导程序没有任何拖放功能，但您可以在组合中添加一些 jQuery UI 香料以获得您正在寻找的效果。例如，使用draggable框架中的交互，您可以定位您的模态 ID，以允许它在模态背景中四处拖动。
Try this:
试试这个：
JS
JS
$("#myModal").draggable({
handle: ".modal-header"
});
Update: bootstrap3 demo
回答by user535673
Whatever draggable option you go for, you might want to turn off the *-transitionproperties for .modal.fadein bootstrap's CSS file, or at least write some JS that temporarily disables them during dragging. Otherwise, the modal doesn't drag exactly as you would expect.
无论您选择哪种可拖动选项，您可能希望关闭引导程序的 CSS 文件中的*-transition属性.modal.fade，或者至少编写一些 JS 在拖动过程中暂时禁用它们。否则，模态不会像您期望的那样完全拖动。
回答by user4936321
You can use a little script likes this.
你可以使用一个像这样的小脚本。
simplified from 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);
example : $("#someDlg").modal().drags({handle:".modal-header"});
例如： $("#someDlg").modal().drags({handle:".modal-header"});
回答by Bryan Larsen
jquery UI is large and can conflict with bootstrap.
jquery UI 很大，可能会与引导程序冲突。
An alternative is DragDrop.js: http://kbjr.github.io/DragDrop/index.html
另一种选择是 DragDrop.js：http: //kbjr.github.io/DragDrop/index.html
DragDrop.bind($('#myModal')[0], {
anchor: $('#myModal .modal-header')
});
You still have to deal with transitions, as @user535673 suggests. I just remove the fade class from my dialog.
正如@user535673 所建议的那样，您仍然必须处理转换。我只是从我的对话框中删除了淡入淡出类。
