jquery拖动对象快速问题

Question

如果我非常慢地拖动一个对象，它就会完全按照我想要的方式执行。但是，如果我做得更快一点或非常快，它就不会按预期工作。您可以看到两种结果：缓慢拖动时的预期结果和快速拖动时的完美结果。我只是一个 jquery 初学者，如果您看到 JS 代码的任何其他愚蠢部分，请告诉我。

背景中的移动对象（在拖动可拖动对象时）应每离开地图支架 20 个像素就返回到其原始位置。当快速移动时，它不会这样做，但是，当缓慢拖动扳机时，它会这样做。

现场示例： http://jsbin.com/egeki3

ps 仅拖动顶部/底部方向 仅

JS 部分（使用 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

当您拖动对象时，该对象不会占据所有可能的位置，而是会跳过一些像素。

我记录了 .top 位置，其值为 8、11、18、27，因此条件为

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

true 的情况很少见。

对于您的情况，最好有类似的东西

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

它仅取决于您确切想要做什么，但不要使用像素算术和模数拖着走，坏主意！