jQuery Draggable + ordenable - ¿Cómo rechazar una caída en el género?

Question

Tengo una lista ordenable de videos y un conjunto de videos arrastrables. Básicamente quiero asegurarme de que los videos arrastrados no estén en los primeros 5 minutos de video. Como las duraciones de los videos varían, quiero probar esto en la caída: sume el tiempo hasta ese momento y, si no es así, revertiré 5 minutos y mostraré un error.

He intentado conectar todas las devoluciones de llamadas arrastrables y ordenables (incluida la devolución de llamada revertida no documentada) para hacer mi prueba, pero procure lo que intente, el dom siempre se cambia (y las llamadas clasificables se actualizan)

¿Alguien tiene alguna sugerencia?

Answer 1

puede revertir la operación de arrastre llamando al método cancel del widget draggable (método que no está documentado, pero su nombre no comienza con un guión bajo, lo que sin duda hace que sea "más seguro" para utilizar de forma fiable). Sin embargo, solo funciona durante el evento start, ya que otros eventos ocurren demasiado tarde para activar la animación de revertir.

Sin embargo, el widget sortable todavía registrará una caída incluso si la operación de arrastre se cancela, por lo que también tiene que quitar el elemento recién añadido (durante el evento stop, ya que se produce el evento start demasiado pronto):

$("#yourSortable").sortable({ 
    start: function(event, ui) { 
     if (!canDropThatVideo(ui.item)) { 
      ui.sender.draggable("cancel"); 
     } 
    }, 
    stop: function(event, ui) { 
     if (!canDropThatVideo(ui.item)) { 
      ui.item.remove(); 
      // Show an error... 
     } 
    } 
}); 

Puede ver los resultados en this fiddle (el cuarto elemento siempre se revertirá).

Actualización: Como John Kurlak señala con razón en los comentarios, el elemento no revierten a causa de la llamada a draggable("cancel"), sino porque es ui.sendernull en nuestro caso. Arrojar algo resulta en el mismo comportamiento.

Por desgracia, todas las otras combinaciones que intentó resultado en el elemento que se está revertido sin la animación que tiene lugar, así que tal vez nuestra mejor apuesta es evitar el acceso ui.sender y en lugar de escribir algo como:

start: function(event, ui) { 
    if (!canDropThatVideo(ui.item)) { 
     throw "cancel"; 
    } 
} 

La excepción no detectada todavía aparecerá en la consola.

Answer 2

Encontré una manera diferente. Si no te importa no tener la animación de la misma flota de nuevo a su lugar original siempre se puede utilizar este

.droppable({ 
    drop: function (event, ui) { 

     var canDrop = false; 

     //if you need more calculations for 
     //validation, like me, put them here 

     if (/*your validation here*/) 
      canDrop = true; 

     if (!canDrop) { 
      ui.draggable.remove(); 
     } 
     else{ 
      //you can put whatever else you need here 
      //in case you needed the drop anyway 
     } 
    } 
}).sortable({ 
    //your choice of sortable options 
}); 

he usado esto porque necesitaba el evento de colocación de cualquier manera.