Is there any way I can get jQuery to perform a function when you drag an item outside a droppable DIV?
Let's say that we have draggable or sortable items in a div and you want them deleted if they are dropped outside their parent div.
I know there is the "out" event but that works as soon as you drag the item outside the div, not when you drop it (release mouse button).
Finally got a proper solution to this, even though it is a bit "hacky" as well. What I do is I set the foreground div with the draggables as the droppable, but use the dropover and dropout features to determine if the item is outside the foreground div. When it's outside the div, I bind the mouseup event to do the drop functionality. When it's back in I unbind the mouseup event so it doesn't fire.
Because when dragging I'm already holding the mouse button down, releasing it is the same as dropping what I have in my "hand".
$("#foregroundDiv").droppable({
accept: ".draggableThingy",
tolerance: "pointer",
out: function(event, ui) {
$(ui.helper).mouseup(function() {
doSomethingTo(ui.draggable);
});
},
over: function(event, ui) {
$(ui.helper).unbind("mouseup");
}
});
Why not wrapped all elements with another droppable div, then do the checking there?
What about if the user dropped it outside the browser window? Would you consider this also?
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With