Take the 2-minute tour ×

I have a list of photos, and I have draggable added to them, however when the photo is dragged outside of the parent div, I want to change it's class so it indicates that if you drop it, it will be removed, and then when the user drops it, I want it to fire a function. (only if it is outside of the parent div)

<ul class="photos">

so when an li is dragged outside of .photos, it fires to add class, and then if it's dropped outside of it, then it fires and event to remove it.

share|improve this question
add comment

1 Answer

up vote 7 down vote accepted

Assuming the parent div you mention is a droppable, you can bind an event handler to the dropout event:

$("#parentDiv").on("dropout", function(event, ui) {
    //ui.draggable refers to the draggable

The event will fire any time an accepted draggable is dragged outside the tolerance area of the droppable.

Update (see comments)

You can supply a callback function to the revert option. The function can take one argument which either contains the droppable on which the draggable was dropped, or false (if it was dropped somewhere invalid):

    revert: function(valid) {
        if(!valid) {
            //Dropped outside of valid droppable

Here's a working example.

share|improve this answer
This works for adding the class to it, however what about detecting when it's actually dropped? –  Dylan Cross Feb 16 '12 at 19:04
This fires when you drag it outside of the droppable. I thought that's what you wanted, so you could add a class to the draggable when it's dragged outside of the droppable? –  James Allardice Feb 16 '12 at 19:05
Yes i do, but how would I detect when it's actually dropped outside? –  Dylan Cross Feb 16 '12 at 19:06
@DylanCross - See my edit. –  James Allardice Feb 16 '12 at 19:11
a true lifesaver... thanks for digging deeper than the documentation.. –  Gaby aka G. Petrioli Aug 8 '13 at 0:49
add comment

Your Answer


