Drag and Drop not working on mobile devices

Need help Mobile
1

Hi, how do i get drag and drop to work on mobile devices? It works on my desktop and laptop but does not work on my iphone and android phone. Any help would be appreciated. Thanks

2

Hi @omarpele,

Welcome to the Bubble community!

Are you using the Draggable Elements plugin by Bubble? If so, in the Bubble Manual, they do note that “The drag and drop plugin may have less smooth behavior on certain older browsers. Also, note that the smoothness and performance of the interaction will depend on your particular implementation of the plugin, meaning more complex implementations may see slightly degraded performance. We encourage you to test your implementation to see if you are happy with the resulting user experience.”

3

Hi Johnny.
Thanks for your reply. I am using Bubble’s draggable element plugin. The drag drop group doesn’t even move an inch and i’m on the legacy plan. The strangest thing is, when i use my bubble app that isn’t on the legacy plan it works perfectly on my mobile devices. I can only think that i need to delete the drag drop plugin on my legacy plan app and reinstall it. I’m just thinking what i will lose if i did that. Anyway, i have a lead to investigate. Thanks for getting back to me and if you have any more info, please let me know. Thank Again. :smiley:

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

2 Likes