Drag-drop on a Tablet?

I am very happy with the way I have drag-drop working for project boards and simple lists.

The board works very well with mouse interface. Obviously, a multi-column board isn’t practical on a phone. (Maybe two narrow columns, but probably not a practical solution on the small screen.)

The simpler lists work very well with a mouse and very well on my iPhone.

Being so happy with how drag-drop works on for the project board, I brought it up on my new Surface Pro to see how dragging works by touch.

NOTHING!

There is no obvious way to move a drag area. I’ve tried Chrome and Edge. I’ve tried my finger and the Surface Pen.

Is there something I can do to make this work?
Is there something Bubble can do to support apps this?

3 Likes

Seeking same answer…

What I am planning on doing is putting a menu into the repeating group cell that would allow user to select which area to move the selected item to…from a user experience having drag and drop on mobile isn’t practical ( at least in my mind )…I’d try to check out what existing platforms do and try to emulate them as they have probably paid big bucks for expert UX designers

I learn a lot from looking at the UI/UX of other software. Very often what I see is bad UI. I can chalk it up to a lot of possible reasons, but very often the evidence suggests that developers just got lazy and fell into habits resulting from compromises made long ago.

Drag and drop is a brilliant solution on a phone form factor as long as you stick with a single column or simple swipe left or right.

Because drag/drop works on the phone, I believe it can work on a tablet. Until I figure out how to fix that, I will be forced to live in the camp of the compromisers.

In the meantime, I believe there are people on this forum who understand the underlying technology far better than I do and could explain where the breakdown is and what it would take to fix it.

1 Like

Brett,

Hopefully someone in this forum understands the tablet drag/drop issue and can at least put it into perspective for us. In the meantime, I may have to work on the menu idea that @boston85719 suggested.

Yeah I’m not a big fan of that UX outcome. Perhaps it’s something we can get access to if we utilise some of Gurav’s (BDK Native) features. In the meantime I’m going to hide the draggable element altogether on smaller screens. I’d be keen to know if you get something working.

Cheers,
BM

This problem will be solved someday(?) :thinking:

Thank you, again, for suggesting this. As I use drag-drop on the computer, I realize there are times when it might actually be more convenient to use a menu. Drag-drop can be convenient and intuitive, but isn’t always the fastest way to get things done. Providing the menu option to get the work done.

image

I already have a cell-context menu for deleting and other actions, it can easily be extended to include some move operations.

I think this will be a useful addition to the page and an effective workaround for tablets.

1 Like

@laurence if you are not already familiar with the method of making a menu in a repeating group out of the cell itself, so that the menu will not affect the dimensions of the repeating group when displayed and instead “sit on top” of the repeating group, it is a simple enough task.

Create a reusable element. Make the reusable element dimensions the same as the menu icon. Then add a floating group to the reusable element. It will be “out” of the reusable elements dimensions but it will be used.

You might need to fiddle with custom states a bit to get the floating group ( ie: menu ) to recognize the current cells thing from your repeating group but as I recall it isn’t difficult.

Thanks.

I’ve been using Group Focus rather than Floating Group. I’ve also kept my rg cell menus horizontal so I don’t have to think about what will happen when they’re used in a cell at the bottom of the page. I don’t know what would happen with a tall (or low-hanging) menu at the bottom, but the wide, horizontal menu has worked well for me.

Yes, I experienced a similar issue with the floating group approach at the bottom of the page and needed to reconfigure the repeating group so that it would never allow the menu to be “below” the bottom of the page.

I was actually thinking of how a Group Focus would work.

Did you put the group focus into a reusable element? Or is it just on the page itself?

I think in the past I had attempted the group focus method on page but had a hard time getting it to display properly.

The Group Focus is in the reusable element that is just a three-dot icon of

The menu is stone simple right now.
The gf offsets are such that it just covers the icon and then to the left.

I also have another gf that is “on top of” the delete icon.
image

I will test with the group focus as opposed to the floating group as it seems like it is probably a better element to use in this situation considering the floating group doesn’t provide the same flexibility in placement and I had the issue of my menu going off page and not being visible while using the floating group.