Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery Droppable: dropping outside div?

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

like image 489
kasakka Avatar asked Dec 01 '09 09:12

kasakka


2 Answers

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");
        }
    });
like image 121
kasakka Avatar answered Nov 03 '22 03:11

kasakka


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?

like image 25
jerjer Avatar answered Nov 03 '22 02:11

jerjer