Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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!

like image 877
Evan Layman Avatar asked Jul 18 '11 17:07

Evan Layman


People also ask

How to disable drag in jQuery?

Syntax: $( ". selector" ). draggable({ disabled: true/false });

How do I make a jQuery dialog box draggable?

jQueryUI provides draggable() method to make any DOM element draggable. Once the element is draggable, you can move that element by clicking on it with the mouse and dragging it anywhere within the viewport.

How do you check if jQuery dialog is initialized?

dialog( { ... } ); Then check for the class when needed: if ($("selector"). hasClass("initialized")) { ... }


2 Answers

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

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

like image 90
Sorin Haidau Avatar answered Oct 20 '22 08:10

Sorin Haidau


$("#test_id").dialog({
    display: 'block',
    width: 500,
    modal: true,
    resizable: false,
    draggable: false,
    buttons: {
       "Ok": function() {
            $(this).dialog("close");
        }
    }
});
like image 37
Annie Chandel Avatar answered Oct 20 '22 09:10

Annie Chandel