jQuery UI对话框/拖动问题

Question

使用jQuery UI Dialog。

非常好用，但目前当我拖动对话框时，它不会移出屏幕（整个对话框始终在视口内）。

是否有一种方法可以设置对话框，使我可以将其部分拖到屏幕外？

- OneNerd

---

为什么你想要将部分内容移出屏幕？ - Vishwanath Dalvi

有时你需要把它稍微移开一点，才能看到它下面的东西。我相信还有其他原因，但问题是“如何？”，而不是为什么。 - Wesley Murch

@ViswanathanIyer：它们覆盖了主要区域，但包含工具来对该区域进行更改，因此用户会弹出对话框，进行一些微调，然后将其拖到一边以查看更改。现在，他们需要关闭它，然后重新打开它。 - OneNerd

一个“最小化”按钮会非常棒... @OneNerd：我想知道你的用户是否真的会想到拖到屏幕外？当然，你和我知道该怎么做 - 但根据你的受众不一定很直观。 - Wesley Murch

@Wesley Murch ：是的，我们已经有了双击最小化，但是当你拖动它时，它不会在边缘处强制停止，似乎更自然--对我来说，我总是想把它移到一边（如你所说，也许只有我这样想）。 - OneNerd

Answer 1

或者您可以用更简单、更符合“jQuery方式”的方法来完成 :)

$(document).ready(function(){
    $('#dialog').
    dialog({
        //在这里添加你的对话框选项
    }).
    dialog("widget").draggable("option","containment","none"); //这个链式序列会取消限制
});

- Jeffz

---

你真厉害！我需要将对话框限制在特定的 div 中（将 "none" 改为 "#mydiv"）。这是解决方案。 - Matías Cánepa

完全是冠军。人们是如何发现这些宝石的呢？ - horace

Answer 2

如果您扩展jQuery对话框代码，那么您肯定可以实现。只需包含以下代码：

$.ui.dialog.prototype._makeDraggable = function() { 
    this.uiDialog.draggable({
        containment: false
    });
};

它将使用false作为默认包含值的覆盖值，从而禁用了包含。

- betamax

---

谢谢 - 我会尝试调整一下，看看能得出什么结果。 - OneNerd

我正在尝试实施这个修复方法，但迄今为止还没有成功。我将其加载到我的script.js文件中的docready之外（在docready内也不起作用）。这看起来像是一个全局的改变。我是否需要以某种方式将其与每个对话框联系起来？ - CoryDorning

+1 但这会替换一些内置功能，如果必要的话，您可以避免这种情况。 (https://dev59.com/pWw15IYBdhLWcg3wT5_2#7251026) - Alconja

Answer 3

我曾经遇到过同样的问题，本来想采用 betamax 的解决方案，但注意到该方案实际上替换了jQuery UI中的一些内置功能。因此，我改变了方法，保持了内置的功能，并通过重写 _makeDraggable 而非完全替换它来关闭拖动约束：

if (!$.ui.dialog.prototype._makeDraggableBase) {
    $.ui.dialog.prototype._makeDraggableBase = $.ui.dialog.prototype._makeDraggable;
    $.ui.dialog.prototype._makeDraggable = function() {
        this._makeDraggableBase();
        this.uiDialog.draggable("option", "containment", false);
    };
}

- Alconja

Answer 4

尝试使用选项和位置。编写自己的JavaScript调用以移动框。

   $('#dialog').dialog('option','position',[500, 100]);

但是您不能将框移出视口，如果想要这样的功能，请编写自己的代码，扩展jquery ui对话框，(更新检查有效位置的代码块（如果位置x，y在视口中则为有效）

- Satish