Question

如果我拖动一个物体的速度非常慢，它就完全符合我的要求。但是，如果我更快或更快地执行它，它将无法按预期工作。你可以看到两个结果：预期，拖动慢和无瑕，快速拖动。我只是一个jquery初学者，如果你看到JS代码的任何其他愚蠢的部分，请告诉我。

背景中的移动物体（在拖动可拖动物体时）应返回其原始位置，每移动20个像素，它将远离地图持有者。当快速移动时，它不会这样做，但是，当拖动触发器时，它会这样做。

P.S。仅拖动顶部/底部方向

仅限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

是真的。

对于你的情况，最好有像

这样的东西

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

它只取决于你想要做什么，但不要使用模数和像素算术＆amp;拖着，坏主意！

jquery拖动对象快速问题

1 个答案: