IU de JQuery ajustada a una grilla dentro de un elemento

Question

Tengo dos divs, y estoy usando la biblioteca JQueryUI para colocar un div en otro.

Quiero ajustar el divisor arrastrable a una cuadrícula dentro del elemento desplegable en lugar de una cuadrícula en toda la página. He encontrado que el atributo de ajuste se ajusta al elemento desplegable, también he encontrado el atributo de cuadrícula para ajustarlo a una cuadrícula, pero ¿hay alguna forma de combinar los dos?

$("#draggable").draggable({ grid: [ 50, 50 ] }); 

La única solución que puedo pensar son para poblar el div gota con una gran cantidad de divs a presión más pequeñas, que es un enfoque que no me gusta!

Answer 1

Puede usar los métodos de sobre y saliente del droppable para detectar cuándo el draggable estaba sobre él, y luego implementar el parámetro de grilla solo en ese punto.

$("#draggable").draggable(); 
$("#snaptarget").droppable({ 
    over: function(event, ui) { 
     $("#draggable").draggable({ 
      grid: [50, 50] 
     }); 
    }, 
    out: function(event, ui) { 
     $("#draggable").draggable("option", "grid", false); 
    } 
});​ 

jsFiddle example.