Twitter Bootstrap模态表单：如何拖放？

Question

我想能够在Bootstrap 2提供的模式窗体中拖放以便移动（在灰色背景上）。有人能告诉我实现这一目标的最佳做法是什么吗？

- AndraD

---

请查看我的纯jQuery答案（无需第三方插件或jQuery UI）https://dev59.com/M2cs5IYBdhLWcg3wynDD#51824269 - Below the Radar

Answer 1

Bootstrap默认不提供任何拖放功能，但您可以添加一些jQuery UI效果，以实现所需的效果。例如，使用框架中的draggable交互，您可以针对模态框ID，使其能够在模态框背景内拖动。

请尝试以下操作：

JS

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

演示，编辑请点击这里。

更新： Bootstrap3 演示

- Andres Ilich

---

在设置了 .modal-header { cursor: move } 之后，这个功能就像魔法一样好用。 - DontVoteMeDown

我无法在最新的Bootstrap版本3.3.5上看到它能够工作。有什么建议吗？已将Jquery更改为1.11.0，但没有运气。谢谢。 - Khrys

你好@Khrys，这里是一个更新的演示，带有可拖动的模态框标题，http://output.jsbin.com/vafulubaju。这个答案很旧了，所以我猜测演示中的某些JS链接已经失效了。 - Andres Ilich

太棒了。感谢您的快速回复。 - Khrys

提供的演示不起作用。有更新的机会吗？ - Script47

添加了一个变体，它全局附加到所有模态窗口。 - Felix Böhme

Answer 2

无论您选择哪个可拖动选项，您可能希望在 Bootstrap 的 CSS 文件中关闭.modal.fade的*-transition属性，或者至少编写一些 JS 代码，在拖动期间临时禁用它们。否则，模态框不会完全按照您的预期进行拖动。

- user535673

---

此问题已在https://dev59.com/03DYa4cB1Zd3GeqPC6tc上讨论并解决。 - bbodenmiller

Answer 3

你可以使用像这样的小脚本。

简化自 不使用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").modal().drags({handle:".modal-header"}); 意思是在模态框上添加拖拽功能，当鼠标点击模态框头部时，可以移动整个模态框。

- user4936321

---

你的代码已经过时了。我尝试了一下你的代码，它可以工作，但是拖动时会出现问题。我通过上面给出的链接获取了代码并进行了修复。请更新你的代码，基于从链接中获取的代码。 - Leonardo Montenegro

Answer 4

在之前利用 jQuery UI 的答案基础上，这个代码只需要引入一次，就可以应用于所有的模态框，并且保持模态框在屏幕上，这样用户就不会意外地将标题移出屏幕而无法再次访问句柄。同时将光标设置为“移动”，以提高可发现性。

$(document).on('shown.bs.modal', function(evt) {
    let $modal = $(evt.target);
    $modal.find('.modal-content').draggable({
        handle: ".modal-header",
        containment: $modal
    });
    $modal.find('.modal-header').css('cursor', 'move')
});

evt.target 是指位于实际 .modal-content 后面的半透明覆盖层 .modal。

- Felix Böhme

Answer 5

jQuery UI很大，可能与Bootstrap冲突。

另一个选择是DragDrop.js：http://kbjr.github.io/DragDrop/index.html

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

你还需要处理过渡，就像@user535673建议的那样。我只是从我的对话框中删除了淡入淡出的类。

- Bryan Larsen