Estou criando um visualizador de imagens bastante bacana, mas estou preso em uma parte específica: movimentar a imagem quando ampliada. Parece um problema trivial e tentei praticamente todas as respostas a perguntas semelhantes no SO, mas sempre, algo não está funcionando direito. Preciso de um novo par de olho

Abri temporariamente um URL no meu servidor de desenvolvimento. Dê uma olhada nesta página:

[URL fechado]

Em seguida, mova a roda do mouse para acionar o zoom. Aqui estamos. Uma vez ampliado, clique e arraste para tentar mover a imagem. Está tudo certo, mas algo não está certo. Atualmente, este é o código usado para o pan:

var clicking = false;
var previousX;
var previousY;

$("#bigimage").mousedown(function(e) {

    e.preventDefault();
    previousX = e.clientX;
    previousY = e.clientY;
    clicking = true;
});

$(document).mouseup(function() {
    clicking = false;
});

$("#bigimage").mousemove(function(e) {

    if (clicking) {
        e.preventDefault();
        var directionX = (previousX - e.clientX) > 0 ? 1 : -1;
        var directionY = (previousY - e.clientY) > 0 ? 1 : -1;
        $("#bigimage").scrollLeft($("#bigimage").scrollLeft() + 10 * directionX);
        $("#bigimage").scrollTop($("#bigimage").scrollTop() + 10 * directionY);
        previousX = e.clientX;
        previousY = e.clientY;
    }
});

A solução que estou procurando tem estas características:

ireção correta do movimento panorâmico sobre os eixos X e Não deve ser possível deslocar-se para fora das margens da imagem Panorâmica razoavelmente fluente Bom ter: redimensionar a janela não deve causar problemas

Embora eu aprecie qualquer ajuda que possa obter, não me aponte para um plug-in genérico, tentei muitos deles em busca de uma resposta que funcione para o meu cenário específico. Estou tão desesperada que até definirei uma recompensa em dinheiro pela solução perfeita que atende às características acim

PS: Tente o link no Firefox ou em um navegador da Webkit