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
Author by
Evan Layman
Updated on March 17, 2020Comments
-
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 about 8 yearsWhile 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.