CODEWITHSUNDEEP
jquerydraggableperformance
Gajus
Gajus

Reputation: 73778

jquery dragging object fast problem

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

p.s. 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){
  }
 });

Upvotes: 1

Views: 1110

Answers (1)

Cyril Gandon
Cyril Gandon

Reputation: 17048

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 !

Upvotes: 1

Related Questions