Drag/Drop Group Not Working on Mobile phone

Need help Plugins
1

My title is my question. The drag/droppable group plugin by Bubble works on my laptop but won’t work on my mobile phone. I’ve tried multiple browsers and looked at the forum for solutions. I’m confused because this should be extremely easily…place drag/drop group on your page and walah it works…but it doesn’t. Any ideas? Thanks ahead of time.

2

Hey,

I think there’s an issue with the draggable element plugin, yeah.

Drag and drop was perfectly working in my app for months, and since today, i can no more drag and drop components on mobile phones. Really weird and strongly impacting …

3

Hey, did you ever figure out how to fix this?

4

So I am also using the Draggable Elements plugin and had the same issue: the drag&drop functionality with the Drag/drop Group and Drop Area worked just fine on my laptop but on my mobile device, nothing happened.

In this case, it is hardly solvable with pure Bubble.io means, so I started doing research on the JS under the hood. Super simplified, turns out, laptops detect mouse-related events ("mousemove", "mouseup" etc.) while mobile devices do so with touch-related events ("touchmove", "touchup" etc.). Knowing that, the only thing to do is to establish a mapping with those.
Add the following (combined from StackOverFlow threads, credits and much thanks to JavaScript mapping touch events to mouse events - Stack Overflow and javascript - Unable to preventDefault inside passive event listener - Stack Overflow) either into Script in the Body area in the SEO/Metatags setting (if you’re on a paid plan) or into an HTML element that would be visible on the target page (otherwise):

<script>
    function touchHandler(event)
    {
        var touches = event.changedTouches,
            first = touches[0],
            type = "";
        switch(event.type)
        {
            case "touchmove":  type = "mousemove"; break;        
            default:           return;
        }

        var simulatedEvent = document.createEvent("MouseEvent");
        simulatedEvent.initMouseEvent(type, true, true, window, 1, 
                                      first.screenX, first.screenY, 
                                      first.clientX, first.clientY, false, 
                                      false, false, false, 0/*left*/, null);

        first.target.dispatchEvent(simulatedEvent);
        event.preventDefault();
    }
   
    document.addEventListener("touchmove", function(e) {
        e.preventDefault();
        touchHandler(e);
    }, { passive: false });
    
</script>

Note that a single “touchmove” to “mousemove” mapping was enough for me which can not always be the case. For more extensive mapping, refer to JavaScript mapping touch events to mouse events - Stack Overflow and adjust the script accordingly.

NoQA: no extensive testing was conducted on different mobile devices. With me, it worked on Edge / Chrome / Safari but was further tested only on iPhone 11 and iPhone 13 (PWA from Bubble app).

Hope it helps!

Best,
Max @ Coreworking