jQuery que se puede arrastrar, evento cuando se descarta fuera del dominio div

Question

Tengo una lista de fotos, y puedo arrastrarlas, sin embargo, cuando la foto se arrastra fuera de la div principal, quiero cambiar su clase por lo que indica que si lo sueltas, se eliminará, y luego cuando el usuario lo suelte, quiero que active una función. (Sólo si está fuera de la div padre)

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

por lo que cuando un li es arrastrado fuera del .photos, dispara a agregar la clase, y luego, si se dejó caer fuera de él, entonces se dispara y el evento a eliminarlo

Answer 1

Suponiendo que el padre div mencionas es un lanzables, puede enlazar un controlador de eventos para el evento dropout:

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

El suceso se iniciará cada vez que un aceptado arrastrable es arrastrado fuera de la zona de tolerancia de la lanzables .

actualización (ver comentarios)

Usted puede suministrar una función de devolución de llamada a la opción revert. La función puede tomar un argumento que, o bien contiene el lanzables en el que se ha colocado el que pueden arrastrarse, o false (si se dejó caer en algún lugar no válido):

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

Aquí hay una working example.