Page keeps scrolling when dragging on iOS 10

[schuma7]

After updating to iOS 10 I noticed that the page doesn't stop scrolling anymore when dragging the element.

I then tried to to enable the longTouch option which caused the page to stop scrolling as expected. After some digging I found out that attaching a no operation event handler to the touchmove event of the element inside of the bindDrag function solved the issue.

The fixed function looks as follows:

bindDrag = function() {
    if (hasTouch) {
        if (isLongTouch) {
            if (isIOS) {
                element.bind('touchstart', longTouchStart);
                element.bind('touchend', longTouchCancel);
                element.bind('touchmove', longTouchCancel);
            } else {
                element.bind('contextmenu', dragListen);
            }
        } else {
            element.bind('touchstart', dragListen);
            element.bind('touchmove', noOp); // <- the bug fix just adds a no operation event handler function() {}, which is later removed in the unbindDrag function
        }
    }
    element.bind('mousedown', dragListen);
};

I currently do not completely understand why this fixes it. Does someone have a cleaner fix, if not I could issue a pull request with my current solution?

[NetWin]

I had the same problem but your fix works like a charm

[vTrip]

@schuma7 is noOp just an empty custom function you define?

[schuma7]

@vTrip Yes, that's right it's just an empty function which I added.

[alinnert]

Thanks for the fix. But defining a new noOp is not necessary. ng-sortable already uses angular.noop in some places. So it can be used in this fix too.

element.bind('touchmove', angular.noop);

[batiste]

@alinnert impressive feature of Angular. Such power... I am switching from React right now