Demo of Dragging elements with grid option

[25,30] [50,60] [75,75] [100,150]



The dragged element alwasy snaps to a grid, you can change the gird dimension by clicking buttons.

STYLE

<style>
.drg_box{ 
position: relative;
FONT-SIZE: 14px;
font-family: Verdana;
padding:5px;
width:50px;
height:50px;
background-color: #ffff00;
border: 2px solid red;
border-radius: 5px;
}
</style>

HTML

<div id="draggable" class='drg_box'>
  <p>Drag me</p>
</div>
<br><br>
<button  id=b1 class=my_button>[25,30]</button> <button  id=b2 class=my_button>[50,60]</button> <button  id=b3 class=my_button>[75,75]</button> 
<button  id=b4 class=my_button>[100,150]</button> 
<br><br>
<div id=d1></div>

jquery

<script>
$(document).ready(function() {
////////////////
$( "#draggable" ).draggable({
grid:[10,10]
});
//////
//////
$("#b1").click(function(){
$( ".drg_box" ).draggable( "option", "grid", [25,30] );
var grid = $( ".drg_box" ).draggable( "option", "grid" );
$('#d1').html("grid : " + grid);
})
///////////
//////
$("#b2").click(function(){
$( ".drg_box" ).draggable( "option", "grid", [50,60] );
var grid = $( ".drg_box" ).draggable( "option", "grid" );
$('#d1').html("grid : " + grid);
})
///////////
//////
$("#b3").click(function(){
$( ".drg_box" ).draggable( "option", "grid", [75,75] );
var grid = $( ".drg_box" ).draggable( "option", "grid" );
$('#d1').html("grid : " + grid);
})
///////////
//////
$("#b4").click(function(){
$( ".drg_box" ).draggable( "option", "grid", [100,150] );
var grid = $( ".drg_box" ).draggable( "option", "grid" );
$('#d1').html("grid : " + grid);
})
///////////
var grid = $( ".drg_box" ).draggable( "option", "grid" );
$('#d1').html("grid : " + grid);
///////////
})
</script>