Toggling draggable grid values with data() causes unexpected change in grid

<script src="../media/js/jquery.js" type="text/javascript"></script>
<script src="../media/js/ui.core.min.js" type="text/javascript"></script>
<script src="../media/js/ui.draggable.js" type="text/javascript"></script>
<style>
#outer{
  height:50px;
  width:100px;
  background:#ddddff;
}
#inner{
  height:50px;
  width:50px;
  background:#44ff44;
}
</style>

<div id="outer">
  <div id="inner"></div>
</div>

<a href="#">change grid<a>

<script>
$(document).ready(function(){
  $('#inner').draggable({
    distance:0,
    containment:'#outer',
    grid:[1,50],
    stop:function(){
      console.log($('#inner').css('left')) //for firebug
    }
  })
  $('a').toggle(
    function(){
      $('#inner').data('grid.draggable',[10,50])
    },
    function(){
      $('#inner').data('grid.draggable',[1,50])
    }
  )
})
</script>

Drag and release the green box to the right bit by bit 3 times.

eg.

by default the grid is 1px on the x-axis.

1. Drag box to the right, console says 3px

2. Drag box to the right again, console says 4px

3. Drag box to the right again, console says 6px

4. Click 'change grid', and the x-axis grid becomes 10px

5. Click box, and the console says 14px

The result gets the previous position (4px) plus the current grid x value (10px). I believe this outcome is not very useful.

I would have expected 16px

OR

A strict 20px since the grid has changed to 10px increments.