Remove droppable functionality on success using jQuery UI

Question

I have the following code which allows you to drag and drop elements on a page and on successful drop it runs a method called saveRatings passing the ids of the elements.

            $('.draggable').draggable({
                revert: true
            });


            $('.droppable').droppable({
                drop: function( event, ui ) {
                    draggedID = ui.draggable.attr("id");
                    droppedID = $(this).attr("id");
                    Global.showLoader('Saving...');
                    quiz1.saveRatings(draggedID, droppedID);
                }
            });

The plan is that once a successful drop has taken place it will then remove the dragged item and remove the droppable class from the dropped element to prevent other elements from also being dropped there:

saveRatings: function ( choiceId, ratingId ) {

                // Hide the dragged choice
                $('div#' + choiceId).hide();

                // Remove droppable behaviour
                $('div#' + ratingId).removeClass('ui-droppable');
                $('div#' + ratingId).removeClass('droppable');
                $('div#' + ratingId).addClass('done');

}

The removal part works fine as does the removing of the classes BUT the element still allows others to be dropped on it... even though I have removed the droppable and ui-droppable classes from the element...

Any ideas why this isn't working? I can't show a fiddle as the full-code base is rather large (but doesn't directly effect this) But the examples above should explain the issue enough for a solution hopefully.

Answer 1

Use disable:

$('#' + ratingId).droppable('disable')

Also, you don't need to specify 'div#' when selecting by ID, as ID's are unique.

Demo (using destroy)

Answer 2

You can use:

$('#' + ratingId).droppable('destroy')

This will permanently remove the droppable behavior from the element. If you want to reinitialize it, you just have to make the element droppable again using the same initialization code as when you first initialized it.

For more information, see the documentation: http://api.jqueryui.com/droppable/#method-destroy