jquery ui dialog draggable on entire dialog not just title

Currently jquery ui dialog is draggable only on th开发者_运维问答e titlebar

What's the recommended way to make jquery ui dialog be draggable by the entire dialog instead of just the titlebar?

I just did

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

Anything wrong with this?

Well, elem.dialog({draggable: false}).draggable(); won't work, because as other answers have said, it's not the right element. However, this will work:

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

I think it's a better option than fiddling with jquery internals.

Currently jQueryUI prevents the content from being draggable with this code:

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

So, to make the change you require you'll need to access that internal uiDialog object and change its settings.

If dlg is your dialog content object:

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

will work.

Note that this is futzing with jQueryUI internals and may break if those internals are changed by future updates.