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

1:



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?

2:



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" ) 


3:


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: http://jsfiddle.net/nn5aL/1/. .


4:


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.


5:


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


6:


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


7:


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 }); 



88 out of 100 based on 48 user ratings 298 reviews

@