How do I disable a jquery-ui draggable?

How do I disable a jquery-ui draggable?

How do I disable a jQuery draggable, e.g. during an UpdatePanel postback?

Trigger jQueryUI datePicker on button click, send result to disabled input field


JQuery CSS conflict
Could create a DisableDrag(myObject) and a EnableDrag(myObject) function.
Is there a place to find other jQuery UI themes?
myObject.draggable( 'disable' ) 
Then .
Dialog width does not work in FireFox
myObject.draggable( 'enable' ) 

How to callback the new list id jQuery UI: sortable

jQuery Accordion + Anchor Tag 'stuck as block' bug?


jQuery UI Dialog pass on variables
To temporarily disable the draggable behavior use:.
jQuery UI portlets - toggle portlets to save to a cookie (half way there!)
$('#item-id').draggable( "disable" ) 
To remove the draggable behavior permanently use:.
$('#item-id').draggable( "destroy" ) 


To enable/disable draggable in jQuery I used: .
$("#draggable").draggable({ disabled: true });            $("#draggable").draggable({ disabled: false }); 
@Calciphus answer didn't work for me with the opacity problem, so I used:.
div.ui-state-disabled.ui-draggable-disabled {opacity: 1;} 
Worked on mobile devices either.. Here is the code: .


It took me a little while to figure out how to disable draggable on drop—use ui.draggable to reference the object being dragged from inside the drop function:.
$("#drop-target").droppable({     drop: function(event, ui) {         ui.draggable.draggable("disable", 1); // *not* ui.draggable("disable", 1);         …     } }); 
HTH someone.


Seems like no one looked at the original documentation.

May be there was no it at that time)). Initialize a draggable with the disabled option specified..
$( ".selector" ).draggable({ disabled: true }); 
Get or set the disabled option, after init..
//getter var disabled = $( ".selector" ).draggable( "option", "disabled" ); //setter $( ".selector" ).draggable( "option", "disabled", true ); 


In the case of a dialog, it has a property called draggable, set it to false..
$("#yourDialog").dialog({     draggable: false }); 
Eventhough the question is old, i tried the proposed solution and it did not work for the dialog.

Hope this may help others like me..


The following is what this would look like inside of .draggable({});.
$("#yourDraggable").draggable({     revert: "invalid" ,     start: function(){          $(this).css("opacity",0.3);     },     stop: function(){          $(this).draggable( 'disable' )     },     opacity: 0.7,     helper: function () {          $copy = $(this).clone();          $copy.css({             "list-style":"none",             "width":$(this).outerWidth()         });          return $copy;      },     appendTo: 'body',     scroll: false }); 

68 out of 100 based on 23 user ratings 148 reviews