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)