Question

Currently jquery ui dialog is draggable only on the 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?

Answer 1

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.