jQuery ui Dialog: Turn off 'Draggable' for Dialog content

Question

I'm having a brain fart and cannot seem to get the content of my jquery ui dialog to stop being 'draggable'. I turned off the draggable setting on the actual dialog pop-up, however, the content inside the box is still able to be dragged out of the box's view. I'd like to have a static positioned box and static positioned content within the box.

Here is my code:

$('.LinkBtn').click(function (e) {
        e.preventDefault();
        var OfferID = $(this).attr('id').substring(8);
        $('#HiddenLinks_' + OfferID).show();
        newDialog(OfferID);
    });
    function newDialog(OfferID) {
        var divObj = $('#HiddenLinks_' + OfferID);
        var $dialog = divObj
        .draggable()
        .dialog({
            draggable: false,
            autoOpen: false,
            resizable: false,
            modal: false,
            title: $('#HiddenLinks_' + OfferID).attr('title')
        }).draggable(false);
        $dialog.dialog('open');
        return false
    }

Thanks!

Frayda

Why are you calling draggable() on the <div> if you don't want it to be draggable? – Ziwot

Haha oops :) Thank you for spotting that.. I must be blind. – Frayda

Answer 1

    $('#popup').dialog({
        width: 600,
        modal: true,
        resizable: false,
        draggable: false
    });

In this example I disabled both draggable and resizable events on a dialog box.

Charnel

Answer 2

$("#test_id").dialog({
    display: 'block',
    width: 500,
    modal: true,
    resizable: false,
    draggable: false,
    buttons: {
       "Ok": function() {
            $(this).dialog("close");
        }
    }
});

Oscitant

While this code may answer the question, providing additional context regarding why and/or how this code answers the question would significantly improve its long-term value. Please edit your answer to add some explanation. – Riti

Answer 3

When you do: $("div").draggable({disabled:true}) the div becomes transparent, you can remove the class from disabled so this doesn't happen:
$("div").removeClass(' ui-draggable-disabled ui-state-disabled');

Gwenny

Answer 4

You could also just set the draggable to false by:

$("div").draggable({disabled:true}) // this will disable dragging on a draggable object
$("div").draggable({disabled:false}) // this will enable dragging on a draggable object

Shermanshermie

Answer 5

If you want to stop user from re-sizing your dialog box you can use below code.

$("#yourDivId").dialog("option", "resizable", false);

This will disallow user from re-sizing your dialog box.

Lannylanolin