Fire events on (auto-)scrolling? about interact.js

[taye]

So basically the mouse position should be calculated based on the scrolling container instead of the absolute position on the screen. Is that possible?

At present, this isn't possible. I should be able to implement it, but probably not until >2 weeks from now.

[taye]

Here's a workaround that seems to work fine on everything except Internet Explorer.

var prevMouseMove = null;

interact(document)
    // keep a reference to the most recent mouse move event
    .on('mousemove', function (event) {
        prevMouseMove = event;
    })
    .on('scroll', function () {
        if (!interact.currentAction()) { return; }

        // create a new event using the previous client and screen coordinates
        // the page coordinates will be different because of the scroll
        var e = prevMouseMove,
            newEvent = document.createEvent('MouseEvents');

        newEvent.initMouseEvent('mousemove', true, true, window,
                                -20, e.screenX, e.screenY, e.clientX, e.clientY,
                                e.ctrlKey, e.altKey, e.shiftKey, e.metaKey,
                                e.button, e.relatedTarget);

        e.target.dispatchEvent(newEvent);
    });

[chmanie]

You sir, are just awesome. Thanks so much.
It should work with IE >9 though, shouldn't it?

http://msdn.microsoft.com/en-us/library/ie/ff975292(v=vs.85).aspx

[taye]

You sir, are just awesome. Thanks so much.

You're very welcome. Thanks for helping me to make this project better.

It should work with IE >9 though, shouldn't it?

IE9 has this problem: http://connect.microsoft.com/IE/feedback/details/683322/initmouseevent-does-not-set-pagex-and-pagey-properties-in-ie9 which makes the dragged element get moved to (0, 0).

interact on IE10+ on Windows 8 uses pointer events instead of mouse and I think Microsoft forgot to implement a way to create PointerEvents. http://msdn.microsoft.com/en-us/library/ie/hh772109 - document.createEvent('PointerEvent') isn't listed and throws an exception when called despite there being a PointerEvent#initPointerEvent method.

I think IE10+ on Windows 7 should work since PointerEvents are avoided by interact due to the missing Gesture API (#17 (comment)).

[taye]

It turns out that you can create pointer and gesture events. They need the "MS" prefix to be created.

This code should work in IE10+ and other browsers:

var prevMove = null,
    useGestureEvents = (window.MSGesture && window.MSGestureEvent);

interact(document)
    // keep a reference to the most recent move event
    .on(useGestureEvents? 'MSGestureChange': 'mousemove', function (event) {
        prevMove = event;
    })
    .on('scroll', function () {
        if (!interact.currentAction()) { return; }

        // create a new event using the previous client and screen coordinates
        // the page coordinates will be different because of the scroll
        var e = prevMove,
            newEvent;

        if (useGestureEvents) {
            newEvent = document.createEvent('MSGestureEvent');

            newEvent.initGestureEvent('MSGestureChange', true, true, window,
                                    -20, e.screenX, e.screenY, e.clientX, e.clientY,
                                    e.offsetX, e.offsetY, e.translationX, e.translationY,
                                    e.scale, e.expansion, e.rotation, e.velocityX, e.velocityY,
                                    e.velocityExpansion, e.velocityAngular, e.hwTimestamp,
                                    e.button, e.relatedTarget);
        }
        else {
            newEvent = document.createEvent('MouseEvent');
            newEvent.initMouseEvent('mousemove', true, true, window,
                                    -20, e.screenX, e.screenY, e.clientX, e.clientY,
                                    e.ctrlKey, e.altKey, e.shiftKey, e.metaKey,
                                    e.button, e.relatedTarget);
        }

        e.target.dispatchEvent(newEvent);
    });

[taye]

Implementing this is a lot more complicated than I expected and also might cause problems for some big changes that I'm working on. You'll have to stick with the above workaround as I don't think a proper fix is worthwhile. I might come back to this much later.

[zeeshanjan82]

Hi @taye I am facing similar issue as is mentioned above.
but the workaround does not seem to get fired or solve
When I drag a div and go outside the autoscroll container then the div does not follow the mouse pointed even though the container is scrolling

[scottfwalter]

I can't seem to get the scroll event to fire in 1.2.6. Is my setup incorrect?

        interact(SchedulerDirectiveService.ACTIVITY_CLASS_DOT + ',' + SchedulerDirectiveService.SHIFT_CLASS_DOT)
            .draggable({
                onstart: dragStartListener,
                onmove: dragOrMoveListener,
                onend: dragEndListener,
                autoScroll: {
                    container: $('.schedule-details')[0],
                    margin: 50,
                    distance: 5,
                    interval: 10
                },
                deltaSource: 'client',
                snap: {
                    targets: [ $window.interact.createSnapGrid({
                        x: (cellWidth / SchedulerDirectiveService.SNAPS_PER_HOUR)
                    }) ]
                }
            })
            .on('scroll', function () {
                console.log('SCROLLING');
            });

the console message never seems to happen. So I'm guessing I don't have my interactable setup properly. Any ideas?

[taye]

@scottfwalter interact.js doesn't fire scroll events when autoScroll happens.

[mila76]

so don't exist a fix for this problem at all??