jQuery UI Dialog / Drag Question

Question

Using jQuery UI Dialog.

Works great, but currently, when I drag a dialog, it will not move off screen (the entire dialog is always in the viewport).

Is there a way to set up the dialog so I can drag it partially off screen?

Answer 1

Or you can do it in a simpler and more "jQuery way" ;)

$(document).ready(function(){
    $('#dialog').
    dialog({
        //your dialog options go here
    }).
    dialog("widget").draggable("option","containment","none"); //this chained sequence kills containment  
});

Answer 2

Sure you can if you extend the jQuery dialog code. Just include this code:

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

It will override the default containment value of 'document' with false which disables the containment.

Answer 3

I had this same issue and was going to use betamax's solution, but noticed that it effectively replaces some of jQuery UI's built in functionality. So instead I adapted the approach to keep the built in functionality, but also turn containment off by overriding _makeDraggable rather than just outright replacing it:

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);
    };
}

Answer 4

Play with the option, position. Write your own javascript calls to move the box.

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

but you cannot move the box out of the view-port, if you want to have such feature, write your own, extending the jquery ui dialog, (Update the code block where it checks for a valid position (valid if the position x,y are in the viewport)