Geek asks and answers

Remove droppable functionality when used successfully with jQuery UI

I have the following code that allows you to drag and drop elements on a page and, when successfully dropped, runs a method called saveRatings that passes the identifiers 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 after a successful deletion, it will remove the item being dragged and remove the droppable class from the discarded item, to prevent other items from being dropped as well:

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

}

Part of the removal works fine, just like deleting classes, but the element still allows you to delete others on it ... although I removed the droppable and ui-droppable classes from the element ...

, ? , ( ). , .

+5
3

disable:

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

, 'div#' , .

( )

+17

:

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

- . , droppable , .

. : http://api.jqueryui.com/droppable/#method-destroy

+9

The solution in the accepted answer breaks the droppaple, which means that it just disabled it. But if you do it like this, you cannot turn it on later. According to the documentation , the correct way to do this without breaking an element is:

//Get or set the disabled option, after init.
//getter
var disabled = $( ".selector" ).droppable( "option", "disabled" );
//setter
$( ".selector" ).droppable( "option", "disabled", true );
+1
source

More articles:


All Articles