drag e scroll

[gphp]

ho un problema con uno script.
ho creato un menu laterale che non è altro che la miniatura della pagina intera. un rettangolo si muove sopra questa miniatura e inquadra l'area che si sta visualizzando sul monitor (effetto navigatore di photoshop)
il problema è che il rettangolo è draggable e questo mi fa andare in tilt il resto dello script.


AZIONE 1 questa prima parte si occupa di spostare il rettangolo sulla miniatura in base alla parte di pagina che si sta visualizzando (i due numeri sono i fattori di "rimpicciolimento")
scrollo la pagina > si sposta il rettangolo

$(window).scroll(function(){
     $(".rettangolo").stop()
    .animate({'marginTop': ($(window).scrollTop()*0.0444) + 'px', 'marginLeft': ($(window).scrollLeft()*0.041) + 'px' }, 1);

AZIONE 2 qui invece fa la cosa inversa. sposto il rettangolo > si scrolla la pagina

 
$(".rettangolo").draggable({ 
        drag: function(event, ui) {
              var currentPos = $(this).position();
              $('html, body').animate({'scrollTop': (currentPos.top/0.044), 'scrollLeft': (currentPos.left/0.041)}, 200)
}
});
});

il problema è che quando draggo il rettangolo la pagina si scrolla (AZIONE 2) ma mi parte anche l'AZIONE 1 e si pianta.

come posso fare per far si che esegua o una o l'altra, e non tutte e due? quando solo quando scrollo AZIONE 1, e solo quando draggo AZIONE 2.

grazie!

[Xinod]

l' approccio piu' semplice:
in draggable hai gli event start e stop
al verificare di questi eventi valorizza opportunamente un booleano globale

allo scroll anima il draggabile solo se il booleano lo permette

ciao

[gphp]

grazie xinod!
ho fatto una ricerca veloce su google ma è stata poco esaustiva. hai qualcosa da indicarmi sul booleano?

[Xinod]

praticamente a parole

var stoDraggando=false;

$('.classe').draggable({
  start:function(){stoDraggando=true},
  stop:function(){stoDraggando=false},
  etc etc
})

$(window).scroll(function(){
  if(stoDraggando) return
  else {fai quello che devi fare}
})

[gphp]

e la variabile è definita da

$(".rettangolo").draggable({ 
        drag: function(event, ui) {
              var currentPos = $(this).position();
              $('html, body').animate({'scrollTop': (currentPos.top/0.044), 'scrollLeft': (currentPos.left/0.041)}, 200)
}
});
});

?

grazie

[gphp]

non riesco a risolvere....

[gphp]

Xinod, non so come strutturare lo script. mi daresti una mano in più? grazie!

[gphp]

$(window).scroll(function(){
var stoDraggando=false;
$('.rettangolo').draggable({ 
start:function(){stoDraggando=true},
stop:function(){stoDraggando=false},
cursor: "hand", 
containment: "parent",     
drag: function(event, ui) { 
   var currentPos = $(this).position();
   $('html, body').animate({'scrollTop': (currentPos.top/0.044), 'scrollLeft': (currentPos.left/0.041)}, 200)
    }
    });
            
            
$(window).scroll(function(){
   if(stoDraggando) return
   else {
   $(".rettangolo").stop()
	.animate({'marginTop': ($(window).scrollTop()*0.044) + 'px', 'marginLeft': ($(window).scrollLeft()*0.041) + 'px' }, 1)
      }
})
});

così continua a non funzionare. quando draggo il rettangolo scrollo la pagina ma poi il rettangolo impazzisce e sguizza via, verso l'infinito