Drag causes scroll on Firefox for Android

[RunasSudo]

On any website using Sortable that is capable of scrolling (for example, the demo page), attempting to drag an item on Firefox for Android causes the page to scroll, in the same way that dragging on a non-Sortable item scrolls the page. This causes the dragging to become unusable. The item gets 'stuck' while the page scrolls underneath it. This occurs with both vertical and horizontal scrolling.

The issue is reproducible on the dev branch version, and does not occur with Chrome for Android.

Note: I've had this issue happen a number of times, but sometimes I can't seem to reproduce it.

[vlvagerviwager]

Have you tried setting the scroll option to false? Apologies if you do need it to be able to scroll the page.

[chr15m]

:+1:

@zky829 that does not fix the issue.

[MiguelQueiroz]

sad i also cannot use this in mobile, because the browser does not knows if i want to drag or scroll the body... sometimes works sometimes not.. but i cannot lock the body... although i could lock it using something like this..

var storedscrollbody={};

function disable_scrollbody(top){
storedscrollbody.position=$('body').css("position");
storedscrollbody.top=top;

$('body').css({
   'position' : 'fixed', 'top' : -top+'px'});
}

function enable_scrollbody(){
    $('body').css({'position' : storedscrollbody.position});
    window.scrollTo(0, storedscrollbody.top);
}

Just dont know how to trigger the disable if its on touch move, touch start of the handler.. grrr

[ghost]

Have the same issue. When I click the screen and move my finger, the screen will move too with a thumbnail. Uppps .(

[MiguelQueiroz]

Sadly i had to disable sorting because of scroll on my application for mobile.

A sáb, 12/11/2016, 20:59, MaxLawrence notifications@github.com escreveu:

Have the same issue. When I click the screen and move my finger, the screen will move too with a thumbnail. Uppps .(

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/RubaXa/Sortable/issues/710#issuecomment-260147997, or mute the thread https://github.com/notifications/unsubscribe-auth/ACXW_BX2TrhBrCEeU6v5dAPzetPbe1Uyks5q9ii_gaJpZM4G9r90 .

[StudyMakesMeHappy]

@MiguelQueiroz I am set sort and scroll to false,but body follow move too

[joshbuker]

@waynevanson pinging to get eyes on this issue.

[joshbuker]

@waynevanson @David-Desmaisons if I wanted to create a PR to fix this issue, where in the code should I be looking? I'm assuming it would be related to the dragging event handlers, and maybe the user agent detection for doing a Firefox for Android specific override if needed (I noticed that ChromeForAndroid is already a flag).

This is blocking a core feature for an app I'm building, so I'd like to assist if possible, and/or reach out to the Firefox for Android team as soon as possible if necessary.

[David-Desmaisons]

@athix check on Sortable.js repo. vue.draggable is the glue with vue framework and does not handle events. Please check there if there is no work-around or duplicate issue.

[joshbuker]

@David-Desmaisons this is an issue on the Sortable.js repo, not the Vue Draggable repo..

[joshbuker]

Per: https://medium.com/@deepakkadarivel/drag-and-drop-dnd-for-mobile-browsers-fc9bcd1ad3c5 https://caniuse.com/dragndrop

It appears that Firefox for Android doesn't support build-in drag and drop, which may be related.

Update: It appears that this issue does not happen if the delay is removed. Perhaps whatever hook that's being used without the delay isn't being triggered properly by the delayed version?

[joshbuker]

@waynevanson any updates? I'd be willing to work on fixing this myself, but I need some guidance to get started.

[joshbuker]

@waynevanson @owen-m1 Bumping this issue.

[yannic7]

Same problem here. any updates?

[gazugafan]

@waynevanson @owen-m1 Ran up against this and took a stab. Here's what I've found...

This is actually happening due to Android Firefox's long-press context menu. If you long-press in Android Firefox, it will highlight text. This fires the oncontextmenu event (but I don't think it actually opens a context menu). Actually, if the drag delay is set to the typical 250, I think it takes just a little bit longer for the context menu to activate... so you can actually see the desired behavior if you long press JUST over 250ms (and below however long it takes for Firefox's context menu to activate).

In any case, this interferes with sortable's ability to prevent page scrolling using preventDefault in the touchmove event handler. I don't know why that is, exactly, but I imagine the "context menu" (or highlighted text) completely overrides how native scrolling works and effectively forces it to happen.

You can listen for the oncontextmenu event and call preventDefault to stop the context menu from opening. This keeps the page from scrolling! But this also completely stops all the touch/pointer/mouse events from firing again until you release. So of course that stops everything from working.

I'm not sure what to do. Finding that this was caused by the long-press context menu gave me hope that this was the path to a solution, but I think I've gone as far down that path as I can. Maybe you can find something I'm missing?

Otherwise, I think the only viable solution would be to store the Y scroll position of the page and forcefully set it back everytime it changes. Ew!

[joshbuker]

Day 393 from first contact...

I see perfectly scrolling elements in my dreams occasionally...Taunting me. I check the Github issue. Still no response from the developers. My disappointment grows infinitesimally greater. Maybe one day, the maintainers will hear our pleas, and deem it #willfix. Until then, I go back to the darkness, the land of mild irritation and occasionally broken dragging. :cry: