I have a some draggables in a list of droppables (1 draggable per droppable li).
When I move a draggable from one droppable to another free droppable, I want to diable the receiving droppable, and enable the droppable it is leaving from.
In firebug the droppable class gets removed – but the functionality of the droppable remains. I have a feeling I need to use live() somehow, but could use a 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");
}
});
}
});
});
Instead of removing the droppable class, you can enable/disable droppables by setting the 'disabled' option.
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With