Interfaccia utente JQuery che si aggancia a una griglia all'interno di un elemento

Question

Ho due div e sto usando la libreria JQueryUI per rilasciare un div in un altro.

Voglio dividere il div trascinabile in una griglia all'interno del div drop piuttosto che una griglia sull'intera pagina. Ho trovato l'attributo snap per lo snap all'elemento drop, ho anche trovato l'attributo grid per farlo scattare su una griglia ma c'è un modo per combinare i due?

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

L'unica altra soluzione che posso pensare sono per popolare il div goccia con un sacco di div scatto più piccoli che è un approccio che non mi piace!

Answer 1

È possibile utilizzare i metodi di over e out di droppable per rilevare quando il trascinamento è stato eseguito su di esso e quindi implementare il parametro di griglia solo in quel 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.