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

Posted 2023-05-08

【中文标题】Twitter Bootstrap 模态表单：如何拖放？

【英文标题】：Twitter Bootstrap Modal Form: How to drag and drop?

【发布时间】：2012-09-17 11:32:33

【问题描述】：

我希望能够移动（在灰色背景上，通过拖放）Bootstrap 2 提供的模态表单。谁能告诉我实现这一目标的最佳做法是什么？

【问题讨论】：

查看我的普通 jQuery 答案（无需 3rd 方插件或 jQuery UI）***.com/a/51824269/1914034

【参考方案1】：

默认情况下，引导程序没有任何拖放功能，但您可以添加一点 jQuery UI 香料来获得您想要的效果。例如，使用框架中的draggable 交互，您可以定位您的模态ID，以允许在模态背景中拖动它。

试试这个：

JS

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

Demo，编辑here。

更新：bootstrap3 demo

【讨论】：

设置.modal-header cursor: move 后，这就像一个魅力。

我无法在最后一个引导程序版本 3.3.5 上看到此功能。有小费吗？将 Jquery 更改为 1.11.0，但没有运气。谢谢。

你好@Khrys，这是一个带有可拖动模态标题的更新演示，output.jsbin.com/vafulubaju。这个答案很老了，所以我猜演示中的一些 JS 链接坏了）。

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

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

【参考方案2】：

无论你选择什么可拖动选项，你可能想要在引导程序的 CSS 文件中关闭 .modal.fade 的 *-transition 属性，或者至少编写一些在拖动过程中暂时禁用它们的 JS。否则，模态不会完全按照您的预期拖动。

【讨论】：

这个问题在***.com/questions/15881245/…讨论和解决

【参考方案3】：

jquery UI 很大，可能与引导程序发生冲突。

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

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

正如@user535673 建议的那样，您仍然必须处理转换。我只是从我的对话框中删除了淡入淡出类。

【参考方案4】：

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

从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");

【讨论】：

您的代码已过时。尝试了您的代码并且它有效，但是拖动是错误的。通过从上面的链接获取代码来修复它。请根据链接中的代码更新您的代码。

【参考方案5】：

在使用 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 后面的半透明覆盖层。