jQuery Event Release

Question

Hello, I'm relatively new to jQuery, so I apologize if I'm asking a rudimentary question, but I have a problem with event triggering. Right now I'm trying to design a kind of Image Panning tool, where the user can pan an image in any direction within a viewing window (a fixed div). On mouse down, the function will start to perform a couple calculations, and on mouse move, perform some more calculations before passing values into the

$(this).css('background-position', both);

line, where both is the newly calculated position.

It works up until this point, but I am having problems releasing from the mousemove event. After the initial on mouse down and on mouse move, I can't seem to release the panning with an on mouse up, and the user can pan the image without clicking.

Here is the basic skeleton (#test refers to the viewing div):

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

/* Various Calculations*/

$(this).mousemove( function(f) {

/* More Calculations, variable 'both' is assigned new coord value */

$(this).css('background-position', both);
    });

});

I've tried attaching a mouseup event in various places, but I'm not sure exactly where the right place is, and how to release. Any help is greatly appreciated!

Answer 1

to remove the event you need to unbind it from the object:

$("#test").unbind("mousemove");

the rest of your question is not clear to me

Answer 2

As an alternative, there is a draggable in jQuery UI that may suit your needs. It includes events for start, stop, and drag.

It all depends on whether you want another dependency.

At the very least, you can examine how they perform their event sequence to simulate the same behavior.