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
codice:
$(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
codice:
 
$(".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!