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.
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.
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.
I Created a parent group with a layout of Align to Parent Which Carries the input, text groups etc… I also disable the input so it essentially looks and behaves like a normal group except its an unclickable group. You’ll need to add a button in there with an edit icon or whatever icon you need to show that this part is interactive and can click it.
Grouping Order should be:
Repeating group - Layout: Align to parent
Drop element any layout but fixed height (i did 40px)
Drag element - Layout: Row - Draggable: Yes always
- Icon drag
- Parent Group - Layout: Align to Parent - Height 40px
-text or group displaying relevent data
- Input (set to disable and mute all colors)
- Button (as needded to make clickable)
FYI i tried every other workflow action as well and this was the best workaround until mobile builder comes out without plugins and custom js.
