iOS10: can't drag anything without scrolling

[jessicest]

On iOS10, when trying to drag a dragula item, it scrolls the page. This makes the drag and drop functionality unusable on iOS10.

Steps to reproduce:

• use an iOS10 device. (the iOS Simulator can also reproduce this)
• go to https://bevacqua.github.io/dragula/
• try to drag any of the objects

expected: dragging an item should move it around the page. observe: while trying to drag, it scrolls the page, so the item doesn't move.

[dweitz43]

+1

[scooterlord]

+1

[saschanos]

Any news? :(

[gvlekke]

+1

[dweitz43]

could try this... https://github.com/metafizzy/flickity/issues/457#issuecomment-254501356

[cweidinger]

Thanks @dweitz43.

window.addEventListener( 'touchmove', function() {})

Works like a champ

[adam-lynch]

Related: #413, #457

[adam-lynch]

touch-action: none; seems to fix every other browser (so it's fine on everything including iPad) but not iPhone.

[pawel2105]

@cweidinger bless your soul!

[yosigolan]

Hey the solution window.addEventListener( 'touchmove', function() {}) dont work for me on iphone with ios 11. does anyone knows what am i doing wrong? Thanks

[rohan-deshpande]

Also noticing that the proposed fix does not seem to work on iOS 11 😢

edit: well, this is working for me

/**
 * Fixes issue where dragging will cause iOS safari to also scroll.
 *
 * @see https://github.com/bevacqua/dragula/issues/426
 * @return void
 */
function patchIosDragScroll() {
  window.addEventListener('touchmove', e => e.preventDefault(), { passive: false });
}

patchIosDragScroll();

edit2: welp, spoke too soon, this just stops scrolling from working at all. Sigh.

[gspeach]

Also noticing that the proposed fix does not seem to work on iOS 11 😢

edit: well, this is working for me

/**
 * Fixes issue where dragging will cause iOS safari to also scroll.
 *
 * @see https://github.com/bevacqua/dragula/issues/426
 * @return void
 */
function patchIosDragScroll() {
  window.addEventListener('touchmove', e => e.preventDefault(), { passive: false });
}

patchIosDragScroll();

edit2: welp, spoke too soon, this just stops scrolling from working at all. Sigh.

To expand upon this idea I got it working in Angular.

Set a dragging variable that is tracked and set by dragula.

dragging = true

 const _this = this;
 window.addEventListener('touchmove', function(e) {
     e.returnValue = true;
     if (_this.dragging) {
         e.preventDefault();
     }
},
    {
        passive: _this.dragging
    }
);

[Horst1102]

Is there any good solution that works on any devices?

@gspeach do you have a working example? some bit of more code? Where / when shall i do this: "Set a dragging variable that is tracked and set by dragula." ?

[Horst1102]

I am using it like this:

dragging = false;

constructor(
         ...
    ) {
        document.addEventListener('touchmove', (e) => {
            if (this.dragging) {
                e.preventDefault();
            }
        }, {passive: false});
    }

ngOnInit() {
        this.dragulaService.createGroup('DRAGULA_CONTAINER', {});

        this.dragulaService.drag('DRAGULA_CONTAINER')
            .subscribe(({name, el, source}) => {
                console.log('drag');
                this.dragging = true;

            });

        this.dragulaService.dragend('DRAGULA_CONTAINER')
            .subscribe(({name, el}) => {
                console.log('dragend');
                this.dragging = false;
            });
    }

I want to use it togther with dom-autoscroller and it is working in chrome browser but not on IOSdevice. When i remove the eventListener the autoscroll is working on the iOS device but the page scrolls up/down when moving the elements.

[amk221]

Is this library maintained any more?