How do I increase a counter by dragging a page element and moving the mouse right or left with JQuery?

I need to do something like the Apple website gallery (the 360° iPhone view). So I need to increase or decrease a counter according to the mouse movement after the onclick event (dragging) so I'll be able to load the right im开发者_StackOverflowage (ending with an incremental number).

Is there any way to do this? If I didn't explain it well just let me know, thank you.

---

I'd say either you make use of draggables or you can create your own functions. One that is .mousedown() on your element, and then another is .mousemove(), then finally .mouseup(). You can check out http://jsfiddle.net/QeyYj/ for a very simple example. Code is

var prevX;

$("#area").mousedown( function(e) {
    $("#area").data("in", true);
    prevX = e.pageX;
});

$(window).mousemove( function(e) {

    if ( $("#area").data("in") ) {
        $("#degree").html(prevX%360);
        prevX = e.pageX;
    }
});

$("#area").mouseup( function(e) {
    $("#area").data("in", false);
})