Codice:

$("#draggable").draggable({ snap: true });
$("#draggable2").draggable({ snap: '.ui-widget-header' });
$("#draggable3").draggable({ snap: '.ui-widget-header', snapMode: 'outer' });
$("#draggable4").draggable({ grid: [20,20] });
$("#draggable5").draggable({ grid: [80, 80] });

 

Target dello snap


#draggable: Default (snap: true), si attacca a tutti gli altri elementi

#draggable2: Si attacca solo al box più grande

#draggable3: Si attacca solo ai bordi esterni del box più grande

#draggable4: Griglia di 20px

#draggable5: Griglia di 80px