Can I force the dialog draggable only inside the window? [duplicate]

问题

This question already has answers here:

How do I set the containment on a jQuery UI Dialog? (3 answers)

Closed 2 years ago.

html:

    <div id="dialog" title="Past Issues">
    </div>

Jquery:

$( "#dialog" ).dialog({
        height: 900,
        width:1200,
        modal: true,
});

The problem is currently the dialog can be drag to few more cm of the window area, is it possible to set the containment is the window? Or the default setting is already is containment : window? If yes, what is the root course of the problem? thanks.

回答1:

Try this, for demo I have used a div you can replace it with window

$("#dialog").dialog({
    open: function(event, ui) {
        var vDlg = $(event.target).parent();
        var vCont = $('#main');   // for window use - $(window);
        vDlg.draggable("option", "containment", vCont).appendTo(vCont);
        $(this).dialog("option", "position", "center");
    }
});​

DEMO HERE

回答2:

The default containment option passed to the draggable widget used by the dialog is indeed document, not window.

You can override this default by obtaining the dialog widget using data(), then accessing its uiDialog member and modifying the draggable's containment option there:

$("#dialog").dialog({
    height: 900,
    width: 1200,
    modal: true
}).data("ui-dialog").uiDialog.draggable("option", "containment", "window");

来源：https://stackoverflow.com/questions/14136518/can-i-force-the-dialog-draggable-only-inside-the-window