Drag-scrolling while mouse outside div

[andrewkouri]

I'm trying to figure out how to extend this plugin so that if the user starts scrolling in the div and then they scroll so far that the mouse ends up outside of the div, it can keep scrolling. Basically, I don't want to release control of the scrollable element when the mouse leaves the boundaries of the div. Google maps is a good example, where you can click-drag to scroll anywhere in the big map, but if you happen to move your mouse outside the map div, or even the browser window itself, it continues to scroll

[davetayls]

It would probably be a case of attaching the mouse move listeners to the window instead of the wrapper, then it will keep firing even after the mouse has left the wrapper

[andrewkouri]

Would you mind putting some example code on the docs as to how to do this? I looked in the source and the passable options didn't have a mouse move listener.

[andrewkouri]

(I guess it's also worth noting that I only want scrolling to happen if the click starts in the target div, but I DO want to be able continue moving if the mouse exits)

[UziTech]

I did this by overlaying a fixed div over the entire window and appending it to the target so any mouse moves will move the container.

This works by adding a method called startedMoving to be called whenever the threshold is reached.

I submitted a pull request with this and other useful events.

    $("div").kinetic({
        startedMoving: function (target) {
            var self = this;
            var $overlay = $("<div class='kinetic-overlay'/>").css({
                "user-select": "none",
                position: "fixed",
                top: 0,
                left: 0,
                width: "100%",
                height: "100%"
            }).mousemove(function () {
                //fixes mouse up outside browser
                if (!self.mouseDown) {
                    $(".kinetic-overlay").remove();
                }
            });
            $(target).append($overlay);
        }
    });

[ConeyIsland]

No need in (target), works good with

$(self.$el).append($overlay);