jQuery UI 对话框/拖动问题

Posted 2023-05-08

【中文标题】jQuery UI 对话框/拖动问题

【英文标题】：jQuery UI Dialog / Drag Question

【发布时间】：2011-10-05 12:05:59

【问题描述】：

使用 jQuery UI 对话框。

效果很好，但目前，当我拖动对话框时，它不会移出屏幕（整个对话框始终在视口中）。

有没有办法设置对话框，以便我可以将其部分拖出屏幕？

【问题讨论】：

为什么要部分移出屏幕？

@ViswanathanIyer：有时你需要把它移开一点才能看到它下面的东西。我确定还有其他原因，但问题是如何？，而不是为什么。

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

一个“最小化”按钮会很棒... @OneNerd：我想知道您的用户是否真的会考虑将屏幕拖出屏幕？当然，你和我都知道这样做 - 但取决于你的听众，它可能不是很直观。

@Wesley Murch ：是的，我们已经双击最小化，但看起来更自然的是，当你拖动它时，它不会在边缘强制停止——对我来说，我总是想把它拖到一边（正如你所说，也许这只是我的想法）。

【参考方案1】：

或者你可以用一种更简单、更“jQuery 方式”的方式来实现；）

$(文档).ready(函数() $('#dialog')。 对话（ //你的对话框选项在这里 ）。 dialog("widget").draggable("option","containment","none"); //这个链式序列终止了遏制 );

【讨论】：

你就是男人！我需要将对话框限制为特定的 div（将“none”更改为“#mydiv”）。这就是解决方案。

【参考方案2】：

如果您扩展 jQuery 对话框代码，当然可以。只需包含以下代码：

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

它将使用false 覆盖“document”的默认包含值，从而禁用包含。

【讨论】：

谢谢 - 我会修改这个，看看我能想出什么。

我正在尝试实施此修复程序，但到目前为止还没有运气。我将它加载到doccready之外的我的script.js文件中。 （内部 docready 也不起作用）。这看起来像是一个全球性的变化。我是否需要以某种方式将其与每个对话联系起来？

+1 但这将取代您can avoid if necessary 的一些内置功能。

【参考方案3】：

我遇到了同样的问题，打算使用betamax's solution，但注意到它有效地替换了一些 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);
    ;

【参考方案4】：

使用选项，位置。编写您自己的 javascript 调用来移动框。

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

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