Scrolling on tablets (not autoscroll)

[tfrijsewijk]

trafficstars

Hello,

Thanks for your great library. It works like a charm, we are very pleased with it.

Yesterday I noticed something on my tablet. As far as I know it's a typical scenario:

• Container div which has as-sortable and ng-model
• Three divs coming from an ng-repeat with as-sortable-item
• Each of these divs contain another div which has as-sortable-item-handle

Works perfect, but: The three divs together are higher than the screenheight, so I wanted to scroll down but if you start scrolling inside the div element with as-sortable-item, I can't scroll. I can only scroll if I start scrolling (ie: putting your finger on the screen) outside the as-sortable-item div.

Between every as-sortable-item div there is a small space, and I can scroll fine there.

Found this behaviour on a Surface Pro 3 with Chrome and IE11 and on an Android tablet

[zbend]

Yes seems to be unscrollable on touch devices, probably capturing the touchstart or touchmove for the items all the time instead of only once they have started dragging from an item handle, or something but a great directive that is not usable on mobile\touch devices until this is fixed.

[zbend]

Hmm I found that .as-sortable-item in the ng-sortable.min.css was set to 'tocuh-action: none;' removing that seems to work, not sure what side effects that will have though.

[tfrijsewijk]

Thanks @zbend, this works for me. In the end I went with 'touch-action: auto;'.

Haven't noticed any side effects, it's going massive next week so I'll let you know

[Jeevanandanj]

Hi actually this is awesome library. But me too have the same kind of issue. Is there any possibility to disable the drag and drop in touch devices. I've tried 'touch-action: auto;' but I couldn't solve this issue. Is there any other way to do that???

[gareys]

Was also experiencing this bug on Chrome - Android. touch-action: auto; worked for me. No side effects as far as I can see.

@Jeevanandanj, edit the following file, line 10 and 11 of your_project/bower_components/ng-sortable/dist/ng-sortable.css. The .as-sortable-item class should look as follows:

.as-sortable-item { -ms-touch-action: auto; touch-action: auto; }

Then, recompile your assets, unless it's not automatic. In a gulp project, you can do this by running gulp inject.

Hope this helps...

So others may find this... ng sortable ngsortable scroll touch issues on android mobile chrome windows surface ie11

[tanya355]

i think there is a longTouch option in as-sortable added. i think that would solve this problem.. wouldn't it?

[UltCombo]

The problem is that ng-sortable intentionally removes the native touch scroll behavior from as-sortable-items as you can here. I believe that does not make much sense when you are using sortable item handlers; you would normally want the remaining part of the sortable item (that is not the sortable handler) to not break the native scroll behavior.

To fix this, you can add this ng-sortable override to your own stylesheet (you don't need to edit the package's styles directly):

/* ng-sortable: Fix mobile touch scrolling */
.as-sortable-item {
    -ms-touch-action: auto;
    touch-action: auto;
    -webkit-touch-callout: inherit;
}
.as-sortable-item-handle {
    -ms-touch-action: none;
    touch-action: none;
    /* to disable context menu on iOS devices */
    -webkit-touch-callout: none;
}