jquery перетаскивание объекта быстро проблема - PullRequest
Новая
       4

jquery перетаскивание объекта быстро проблема

1 голос
/ 24 июня 2010

Если я перетаскиваю объект очень медленно, он делает именно то, что я хочу.Однако, если я делаю это немного быстрее или очень быстро, это не работает, как ожидалось.Вы можете увидеть оба результата: ожидаемый при медленном перетаскивании и безупречный при быстром перетаскивании.Я только начинающий 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){
  }
 });

1 Ответ

1 голос
/ 24 июня 2010

Когда вы перетаскиваете объект, объект не занимает всю возможную позицию, но пропускает некоторый пиксель.

Я записываю позицию .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

Это зависит только от того, что именно вы хотите сделать, но не используйте модуль с арифметикой пикселей и перетаскиванием, плохая идея!

...