How to cancel a drop action for jQuery droppable?

Question

I have a jQuery UI droppable which accepts draggables. I want to not allow the drop action if certain conditions are met.

How do I cancel the drop action and do a revert like action?

Answer 1

The accept option on the droppable widget:

All draggables that match the selector will be accepted. If a function is specified, the function will be called for each draggable on the page (passed as the first argument to the function), to provide a custom filter. The function should return true if the draggable should be accepted.

combined with the revert option on draggable should get you what you need:

$(".draggable").draggable({
    revert: 'invalid'
});

$("#droppable").droppable({
    accept: function(el) {
        /* This is a filter function, you can perform logic here 
           depending on the element being filtered: */
        return el.hasClass('acceptable');
    }
});

Note that in this specific example, you could also write accept: ".acceptable", which would make the droppable only accept elements with class acceptable. So another option is when your custom event happens, just apply or remove the acceptable class as necessary.

Here's an example: http://jsfiddle.net/andrewwhitaker/rUgJF/3/

The bottom has a link toggling "acceptability" on an off.