How to control drag & drop behavior on mobile devices, avoiding unintended touch

I am using a drag and drop group to reorder a list. This works fine on desktop, but not on mobile, because of unintended touches (the list covers most the screen). No way for mobile users to move past the repeating group easily - any touch will drag an element.

One common way to bypass this UX-wise is to only let a group be dragged if you press an icon. I tried to do this by creating an icon on the left side of the draggable element. Then once this element is clicked, i change the draggable state.

This idea actually works, except that Bubble registers the click “on release”, not “on mouse down”. So you first have to click and release the icon, and then you can drag the item. Obviously a major UX flaw that no user will understand.

Been banging my head in the wall for some hours now stuck on this problem. Anyone got a way to deal with this? It feels so simple - I just need a “When pressed / touched” instead of “When released” workflow …

Hi there, @tne… for what it’s worth, you could try the unsupported “feature” (which Bubble could “fix” at any time and break your app, if you decide to use it) that enables you to copy an expression from a condition on an element into a condition on a workflow event/action.

So, create a condition on some element using the is pressed operator, and then create a workflow event (maybe a Do when condition is true event), and copy the expression into the Only when field of the workflow event.

I don’t do much (if any) drag and drop stuff, so I don’t know if this suggestion will work for you, but I didn’t think it could hurt to throw it out there as food for thought until someone comes along with a more “better/righter” suggestion.

Best…
Mike

Hi @mikeloc. Would this work with repeating groups? It seems that the Do when condition is true event can’t access anything inside the draggable group using the Only when field.


Any reason this doesn’t work?

I couldn’t find a solution to this. Ended up increasing the size of the input field in the drag and drop, so it covers most of the space (except the area where I have the grip icon). This stops most unintended touches on mobile devices. Works OK. Would be great to have a “when pressed” workflow alternative instead of “when clicked”, hoping to see this in the future.