Se puede arrastrar revertir si está fuera de este div y dentro de otros juegos de arrastre (usando opciones de reversión inválidas y válidas)

En ui draggables ( http://jqueryui.com/demos/droppable/#revert ) ¿es posible revertir un div si está dentro de un div y si no dentro de otro? por ejemplo, como este

$( "#draggable" ).draggable({ revert: "valid", revert:"invalid" }); 

pero eso no funcionaría por razones obvias … ¿puedo condicionar eso sin embargo? … ¿para cuando está dentro de este droppable y no dentro de ese droppable?

    Tu forma de pensar era correcta, tienes que hacer que las cajas pequeñas sean codificables y manejables en el drop event. La parte difícil es cancelar la operación de arrastre.

    De forma predeterminada, sus juegos de arrastre deben comenzar como revert:'invalid' . No tienes que hacer nada si se arrastran dentro de la caja grande, que en mi ejemplo usa tolerance:'fit' , por lo que las cajas pequeñas deben estar completamente dentro para ser aceptadas.

    He hecho que las pequeñas cajas codiciosas desplegables con tolerance:'touch' , por lo que si la pequeña caja arrastrada toca otra pequeña caja, llamará al controlador de drag en él.

    Para cancelar la operación de arrastre desde un controlador de arrastre, puede hacer una solución para configurar el elemento arrastrado para revert:true , lo que lo obliga a revertir aunque se haya descartado en un droppable aceptado. Para asegurarse de que puede arrastrar ese pequeño recuadro de nuevo, en su evento de detención de arrastre debe restablecer la revert:'invalid' . El evento de stop se activará en cada caída exitosa y, si se revierte, se disparará una vez que se haya completado la reversión.

    Puede probar una demostración en vivo aquí: http://jsfiddle.net/htWV3/1/

    HTML:

     

    CSS:

     .drop { display:inline-block; width:300px; height:200px; border:1px solid silver; background-color:whitesmoke; padding:10px; } .drag { display:inline-block; width:30px; height:30px; border:1px solid silver; background-color:white; } 

    Javascript:

     $('.drop').droppable({ tolerance: 'fit' }); $('.drag').draggable({ revert: 'invalid', stop: function(){ $(this).draggable('option','revert','invalid'); } }); $('.drag').droppable({ greedy: true, tolerance: 'touch', drop: function(event,ui){ ui.draggable.draggable('option','revert',true); } });