javascriptjqueryjquery-uijquery-ui-draggablejquery-ui-droppable

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


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!


Solution

  • Because the droppable's drop event fires before the draggable's stop event, I think you can set a flag on the element being dragged in the drop event like so:

    jQuery('#droppable').droppable(
    {
        accept: '#draggable',
        drop: function(event, ui)
        {
            ui.helper.data('dropped', true);
            // awesome code that works and handles successful drops...
        }
    });
    
    jQuery('#draggable').draggable(
    {
        revert: false,
        start: function(event, ui) {
            ui.helper.data('dropped', false);
        },
        stop: function(event, ui)
        {
            alert('stop: dropped=' + ui.helper.data('dropped'));
            // Check value of ui.helper.data('dropped') and handle accordingly...
        }
    });