jquery ui 对话框可在整个对话框上拖动，而不仅仅是标题答案

【问题标题】：jquery ui dialog draggable on entire dialog not just titlejquery ui 对话框可在整个对话框上拖动，而不仅仅是标题
【发布时间】：2011-06-20 11:54:32
【问题描述】：

目前 jquery ui 对话框只能在标题栏上拖动

让 jquery ui 对话框可以被整个对话框拖动而不仅仅是标题栏的推荐方法是什么？

我刚刚做了

elem.dialog({draggable: false}).draggable()

这有什么问题吗？

【问题讨论】：

您能说得更具体一点吗？一些 html 会有所帮助。
我假设它使用了可拖动属性的句柄。也许有一个配置设置可以使整个项目可拖动。
elem.dialog({draggable: false}).draggable() 有效吗？如果是这样，那么我会说这就是答案。
我不希望它起作用 - 它可能会使对话框的内容在其对话框框架内可拖动。

标签： javascript jquery jquery-ui draggable jquery-ui-dialog

【解决方案1】：

好吧，elem.dialog({draggable: false}).draggable(); 不起作用，因为正如其他答案所说，它不是正确的元素。但是，这将起作用：

    elem.dialog({draggable: false}).parent().draggable();

我认为这比摆弄 jquery 内部结构更好。

【讨论】：

将鼠标光标设置为可拖动图标怎么样？
@Kostadin - 用 CSS 自己做。

【解决方案2】：

目前 jQueryUI 禁止使用此代码拖动内容：

self.uiDialog.draggable({
    cancel: ".ui-dialog-content, .ui-dialog-titlebar-close",
    handle: ".ui-dialog-titlebar",
     ...
});

因此，要进行所需的更改，您需要访问该内部 uiDialog 对象并更改其设置。

如果dlg 是您的对话内容对象：

$(dlg).data('dialog').uiDialog.draggable('option', {
    cancel: '.ui-dialog-titlebar-close',
    handle: '.ui-dialog-titlebar, .ui-dialog-content'
})

会起作用的。

请注意，这与 jQueryUI 内部结构有关，如果这些内部结构被未来的更新更改，则可能会中断。

【讨论】：

使用这种方法在可拖动性方面起作用，但问题是我无法使用鼠标单击任何输入控件，例如文本框（只能通过TAB）。根据您希望在对话中显示的内容，Jeffrey 的回答可能是更好的解决方案。