Alex Rivera | Logout

jQuery drag and drop - checking for a drop outside a droppable

Asked 2011-11-11T10:40:05.827
40

My apologies if this was answered in another question, I could not find an answer specific to my problem!

I'm trying to test whether a jQuery draggable is being dropped outside of a legal droppable. This would normally be solved 90% of the time by reverting the draggable, but I don't want to do that. Instead, I want to do one thing if the draggable is dropped onto a droppable (working great!), and something else if it is dropped outside of all possible droppables (currently getting the better of me!).

In a nutshell:

jQuery('#droppable').droppable(
{
    accept: '#draggable',
    drop: function(event, ui)
    {
        // awesome code that works and handles successful drops...
    }
});

jQuery('#draggable').draggable(
{
    revert: false,
    stop: function()
    {
        // need some way to check to see if this draggable has been dropped
        // successfully or not on an appropriate droppable...
        // I wish I could comment out my headache here like this too...
    }
});

I feel like I'm missing something really obvious...thanks in advance for any help!

Edit
Report

1 Answer

5

Try to use the event "out" of a droppable element.

This is the documentation

"This event is triggered when an accepted draggable is dragged out (within the tolerance of) this droppable." If I'm right, this is what you need.

What is also possible is to create an element overlay over the whole page. If the element is dropped there you fire your event. Not the best, but I think the only way to do it. Because you need some other "droppable" item to fire these events.

answered 2011-11-11T11:04:52.790

Your Answer