Disabling / Enabling JQuery

Question

I have a drag and drop in droppables list (1 draggable per droppable li).

When I drag a drappable from one droppable to another free droppable, I want disable to get droppable, and enable droppable from which it leaves.

In firebug, the droppable class is removed, but the droppable functionality remains. I have a feeling that I need to use live () somehow, but I can use leg-up.

$(function() { $(".user").draggable({ revert : true, revertDuration : 200 }); $("li.droppable").droppable({ accept : ".user", hoverClass : "drophover", drop: function(event, ui) { var position = this.getAttribute("id").replace("position_", ""), user_id = ui.draggable.attr("id").replace("user_", ""); droppable = this parent = ui.draggable.parent() $.ajax({ url : "users/"+user_id+"", type : "POST", dataType: "JSON", data : ({ "position" : position, "_method" : "PUT" }), success : function() { $(ui.draggable).parent().addClass("droppable"); $(ui.draggable).appendTo(droppable); $(parent).removeClass("droppable"); } }); } }); }); 

Answer 1

Instead of removing the droppable class, you can enable / disable droppables by setting the parameter to "disabled".

  success : function() { $(ui.draggable).parent().droppable( "option", "disabled", false ); $(ui.draggable).appendTo(droppable); $(parent).droppable( "option", "disabled", true ); } 

http://docs.jquery.com/UI/Droppable#option-disabled

Answer 2

Instead of changing the class, perhaps try setting this parameter? $(ui.draggable).parent().droppable();

and

$(ui.draggable).parent().droppable('option', 'disabled', true) ;