JQuery draggable, event on reset outside the parent div

Question

I have a list of photos and I have draggable added to them, however, when a photo is dragged outside the parent div, I want to change its class so that it indicates that if you delete it, it will be deleted, and then when the user will reset it, I want it to run the function. (only if it is outside the parent div)

<ul class="photos"> <li><img src=""/></li> <li><img src=""/></li> </ul> 

therefore, when li is dragged outside .photos, it starts adding a class, and then if it falls outside of it, then it fires an event to delete it.

Answer 1

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

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

The event will fire at any time when an accepted drag is dragged outside the droppable tolerance area.

Refresh (see comments)

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

 $("#draggable").draggable({ revert: function(valid) { if(!valid) { //Dropped outside of valid droppable } } }); 

Here is a working example .