CODEWITHSUNDEEP
javascriptjquerymouseevent
Mifeng
Mifeng

Reputation: 1565

javascript how to create fluid drag and scroll

I want to create a drag and scroll effect:

-> mouse down
-> drag and mouse move
-> the window will scroll according to the amount of mouse move
-> mouse up
-> scroll stops

Now, the problem I have is when I drag and move, the window DOM elements will shake.

I added a offset check, it mitigates the shaking problem, however not solved.

Can anyone help me?

below is the main code and the full working jsFiddle is at: http://jsfiddle.net/mifeng/sGvA4/1/

container.mousedown(function(e) {

    mouseX = e.pageX;
    mouseY = e.pageY;

    console.log("CON: " + conX + "," + conY);
    console.log("DOWN: " + mouseX + "," + mouseY);

    container.mousemove(function(e) {
        //console.log("INNER-DOWN: " + mouseX + "," + mouseY);

        offsetX = e.pageX - mouseX;
        offsetY = e.pageY - mouseY;

        // offset check
        if (offsetX > 10 || offsetX < -10 || offsetY > 10 || offsetY < -10) {
            conX -= offsetX;
            conY -= offsetY;

            window.scrollTo(conX, conY); // scrollTo

            mouseX = e.pageX;
            mouseY = e.pageY;
        }
    });
});

Upvotes: 1

Views: 2055

Answers (1)

thingEvery
thingEvery

Reputation: 3434

Here are 2 plugins that do what you're after.

http://archive.plugins.jquery.com/project/Dragscrollable

http://azoff.github.io/overscroll/

Upvotes: 3

Related Questions