jQuery Droppable: dropping outside div?

Question

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).

Answer 1

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?

Answer 2

Solved this in a pretty "hacky" way: made a table with a content div in the center and made all other cells of the table droppable. Essentially this means you can drop outside the center div without problems, but it is still far from a good way to do it.

If someone has a better way, please tell me.

Answer 3

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");
        }
    });