jquery dragging object fast problem

Question

If I drag an object very slow, it does exactly what I want it to do. However, if I do it a bit faster or very fast, it does not work as expected. You can see both results: the expected, while dragging slow and the flawless, when dragging fast. I am just a jquery beginner, if you see any other stupid parts of the JS code, please let me know.

The moving object in the background (while dragging the draggable object) should return to its native position each 20 pixels it is moved away from map holder. It does not do that when moved fast, it does, however, when draggin the trigger slow.

The live example: http://jsbin.com/egeki3

ps drag top/bottom directions only

The JS part only (using jQuery UI)

    $().ready(function(){
 // map measurments
 var mapWidth = parseInt($('#map').width());
 var mapHeight = parseInt($('#map').height());

 var fragmentH = 20;
 var fragmentW = 20;

 // number of map fragments to use
 var mapBlocksH = Math.ceil(mapHeight/fragmentH)+2;
 var mapBlocksW = Math.ceil(mapWidth/fragmentW)+2;

 // the area size of map fragments displacement
 var mapH  = mapBlocksH*fragmentH;
 var mapW  = mapBlocksW*fragmentW;

 // calculate the maps fragments wrapper position, dimension
 $('#map div.map, div.drag').css({height: mapH, width: mapW, left: (mapWidth-mapW)/2, top: (mapHeight-mapH)/2});

 for(i = 0; i < mapBlocksH*mapBlocksW; i++)
 {
  $('#map div.map').append('<div></div>');
 }

 $('#map div.drag').draggable({
  revert: true,
  revertDuration: 0,
  addClasses: false,
  start : function(event, ui){
   mapOriginalOffset = $('#map div.map').offset();
   //mapOriginalOffset2 = $('#map div.map').offset();
  },
  drag : function(event, ui){
   $('#map div.map').offset({top: mapOriginalOffset.top + (ui.originalPosition.top-ui.position.top)});

   if(Math.abs($('#map div.map').offset().top-$('#map').offset().top) % fragmentH == 0)
   {
    $('#map div.map').offset({top: mapOriginalOffset.top});

    return false;
    //$('#map div.map').offset({top: mapOriginalOffset.top});

    //mapOriginalOffset2.top = $('#map div.drag').offset().top;
   }
  },
  stop : function(event, ui){
  }
 });

Answer 1

When you drag an object, the object doesn't take all the position possible, but skip some pixel.

I log the .top position, and the value are 8, 11, 18, 27, so it is rare that the condition

Math.abs($('#map div.map').offset().top-$('#map').offset().top) % fragmentH == 0

is true.

For your case, it is better to have something like

Math.abs($('#map div.map').offset().top-$('#map').offset().top) >= fragmentH

It only depends on what you exactly want to do, but do not use modulo with pixel arithmetic & dragging, bad idea !