jquery dragging object fast problem

Question

Si je fais glisser un objet très lentement, il fait exactement ce que je veux qu'il fasse. Cependant, si je le fais un peu plus vite ou très vite, cela ne fonctionne pas comme prévu. Vous pouvez voir les deux résultats: l'attendu, tout en traînant lentement et l'impeccable, en faisant glisser rapidement. Je suis juste un débutant jquery, si vous voyez d'autres parties stupides du code JS, s'il vous plaît faites le moi savoir. L'objet en mouvement en arrière-plan (tout en faisant glisser l'objet déplaçable) devrait revenir à sa position initiale à chaque fois qu'il est éloigné de 20 mètres du porte-carte. Il ne le fait pas lorsqu'il est déplacé rapidement, il fait, cependant, quand draggin le déclencheur ralentit.

L'exemple en direct: http://jsbin.com/egeki3

P.S. directions haut glisser/bas seulement

La partie JS uniquement (en utilisant 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

Lorsque vous faites glisser un objet, l'objet ne prend pas toute la mesure du possible, mais sauter un certain pixel.

I log la position de .top, et la valeur sont 8, 11, 18, 27, il est rare que la condition

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

est vrai.

Pour votre cas, il est préférable d'avoir quelque chose comme

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

Il ne dépend que de ce que vous voulez faire exactement, mais ne pas utiliser modulo avec traînage arithmétique de pixels &, mauvaise idée!