# Drag and Drop not working on mobile devices

**URL:** <https://forum.bubble.io/t/drag-and-drop-not-working-on-mobile-devices/287487>\
**Category:** Mobile\
**Created:** [October 10, 2023, 10:28am UTC](https://forum.bubble.io/t/drag-and-drop-not-working-on-mobile-devices/287487 "2023-10-10T10:28:28Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![omarpele](https://avatars.discourse-cdn.com/v4/letter/o/dc4da7/32.png) [@omarpele](https://forum.bubble.io/u/omarpele)\
**Post date:** [October 10, 2023, 10:28am UTC](https://forum.bubble.io/t/drag-and-drop-not-working-on-mobile-devices/287487/1 "2023-10-10T10:28:28Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![johnny](https://sea1.discourse-cdn.com/bubble/user_avatar/forum.bubble.io/johnny/32/203020_2.png) [@johnny](https://forum.bubble.io/u/johnny)\
**Post date:** [October 11, 2023, 10:22am UTC](https://forum.bubble.io/t/drag-and-drop-not-working-on-mobile-devices/287487/2 "2023-10-11T10:22:34Z")

</div>

Hi @omarpele,

Welcome to the Bubble community!

Are you using the Draggable Elements plugin by Bubble? If so, in the [Bubble Manual](https://manual.bubble.io/core-resources/bubble-made-plugins/draggable-ui-elements), 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.”

---

<div class="post-metadata">

**Author:** ![omarpele](https://avatars.discourse-cdn.com/v4/letter/o/dc4da7/32.png) [@omarpele](https://forum.bubble.io/u/omarpele)\
**Post date:** [October 11, 2023, 11:14am UTC](https://forum.bubble.io/t/drag-and-drop-not-working-on-mobile-devices/287487/3 "2023-10-11T11:14:24Z")

</div>

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. 😃

---

<div class="post-metadata">

**Author:** ![coreworking](https://avatars.discourse-cdn.com/v4/letter/c/cab0a1/32.png) [@coreworking](https://forum.bubble.io/u/coreworking)\
**Post date:** [May 9, 2024, 8:34pm UTC](https://forum.bubble.io/t/drag-and-drop-not-working-on-mobile-devices/287487/4 "2024-05-09T20:34:08Z")

</div>

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](http://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](https://stackoverflow.com/a/1781750) and [javascript - Unable to preventDefault inside passive event listener - Stack Overflow](https://stackoverflow.com/a/59520960)) 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):

```auto
<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](https://stackoverflow.com/a/1781750) 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