Question

I’ve added a script from another question on SO to a solution I’m working with to enable the jQueryUI Dialogs to be dragged outside the documents original boundaries.

This is the script:

//Ensure jQuery windows can be pulled outside the browser boundaries.
$.ui.dialog.prototype._makeDraggable = function() {
    this.uiDialog.draggable({
        containment: false
    });
};

The problem is that when I add this, all of the form becomes a drag-hande. That makes it problematic when trying to scroll a dialog when the dialog begins a drag operation instead.

How can I have just the dialog window titlebar as drag-handle (the original behaviour) but still get rid of the containment?

SOLUTION:

//Ensure jQuery windows can be pulled outside the browser boundaries.
$.ui.dialog.prototype._makeDraggable = function() {
    this.uiDialog.draggable({
        containment: false,
        handle: ".ui-dialog-titlebar"
    });
};

Thank you Joseph!

Answer 1

Look up using drag handles