ScrollBox with Widgets and TouchScreen

Hi!

I have an issue with Scrolling in ScrollBox using a touch inputs.
In my scroll box I have widgets which I can drag and drop onto screen. But I am unable to scroll for now. That’s because widget detects the click, drag and drop.

Is there any way to add some dependecies or priorities? Or maybe a timer?

Thanks

Are you trying to drag buttons?

No, I’m trying to drag my Custom Widget.

Noo :smiley: A SizeBox with an Image in it.

Does it have a button? :smiley:

Noo :smiley:

Shame, that’d make it fun!

I see, I wonder if this is a usability issue rather than a technical problem.

When you use the mouse wheel to scroll, it does not, obviously, register as a click since the only thing that’s happening is the scrollbox getting the focus. And that’s all what’s needed; from now on, it’s mousewheel that takes care of things.

Now, in your case, you touch, which does register as a mouse down; you drag to scroll but that detects the drag.

So we’ve got a conflict here, as you must have figured out judging by your original message.

You mention a timer, so how would you like it to work? Scroll only when the user presses for more than 1s?

Your draggable Custom Widgets supposed to be dragged FROM the ScrollBox as I understand.

First you must pass the input through (not “consume input” in) your Custom Widgets to the scroll pane. There is a method in UUserWidget called SetInputActionBlocking(bool bShouldBlock) but I am not sure where exactly this is in the Editor. That should solve the technical issue but unfortunately I’ll have search for it. I will update the answer when I find it.

Then you are left with just a UX design issue: When you move your finger you are scrolling but also dragging an element. Going in the direction of the scroll will look like scrolling. Going perpendicular to the scroll direction will look like dragging. Anything in-between will look weird :slight_smile:

My personal design solution would be:

  1. Make the scroll area locked in the direction where you would generally drag. If you will mostly drag to the left/right make your scroll box vertical.
  2. Start the drag (and stop the scroll) only when the touch input is certain distance from the Custom Widget it started on. Now if you drag up and down you will only scroll (assuming vertical ScrollBox) and your input distance to the Custom Widget will be minimal since it will scroll with the input. If you move your finger enough sideways the element will snap to it. Here you will have to be very careful with fast gestures, especially if you implement “inertial scroll” as most touch apps do. You might have to forbid dragging if scroll speed is above certain threshold.

But this is mostly design so you can go about ti however it feels best to you.

My timer idea with timer was to:

  1. Start timer on press
  2. If in a period (0,1s for ex.) the touch input left 10x10 pixel area = scrolling
  3. If not → activate dragging.

It would be something like Precise Tapping.

But I think I got to export or implement all of my widgets in C++. I love blueprint, but I hate when I got stuck because some problem which is 5min issue in C++.