Question

我希望能够移动（在灰色背景上，通过拖放）Bootstrap 2提供的模态形式。任何人都可以告诉我实现这一目标的最佳实践是什么？

Answer 1

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

试试这个：

<强> JS

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

Demo，修改here。

更新：bootstrap3 demo

Answer 2

无论你选择哪种可拖动选项，你可能想要在bootstrap的CSS文件中关闭*-transition的{{1}}属性，或者至少写一些在拖动过程中暂时禁用它们的JS。否则，模态不会像您期望的那样完全拖动。

Answer 3

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

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

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，它是实际 .modal-content 后面的半透明叠加层。

Answer 5

jquery UI很大，可能与bootstrap冲突。

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

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

你仍然需要处理过渡，正如@ user535673建议的那样。我只是从对话框中删除淡入淡出类。

Twitter Bootstrap模式形式：如何拖放？

5 个答案: