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

37,851

Solution 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.

Solution 2

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

Solution 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');

Solution 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
Share:
37,851
Evan Layman
Author by

Evan Layman

Updated on March 17, 2020

Comments

  • Evan Layman
    Evan Layman about 4 years

    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!

  • Toby Speight
    Toby Speight about 8 years
    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.