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!
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...
}
});