On a UMG Button, how to handle DragDrop functionality while retaining OnClicked functionality?

anonymous_user_e49f106b
Wed, 26 Aug 2020 20:10:13 +0000
UI

Using this syntax:
Widget > Child | Sibling

I have a widget class to act as a CustomButton that looks like this:

Overlay > Border | Button

I am using these inside another widget (I’ll call it Grid) that looks like this:

VerticalBox > ScaleBox > UniformGridPanel > CustomButton | CustomButton | CustomButton …

In the CustomButton, I set the OnClicked, OnHovered, and OnUnhovered behavior and it worked great.

Then, I wanted to be able to add drag and drop functionality, so I defined OnMouseButtonDown and OnDragDetected in the CustomButton, and OnDrop in the Grid. (This functionality doesn’t actually visually/physically drag and drop any buttons around, it merely links them together in the underlying DataAsset.)

But it wasn’t working. I figured out that if I disable the Button (in CustomButton), the drag operations worked, but obviously, the click and hover operations didn’t. Then I figured out that if I override OnPreviewMouseButtonDown instead of OnMouseButtonDown, the dragdrop operations worked, and the hover also worked, but the OnClicked wasn’t firing.

So after reading about OnPreviewMouseButtonDown, I learn about input events and how they “bubble” up the widget chain or, if using the Preview version, “tunnel” down the chain. So, it seems either the CustomButton can consume the click and let drags happen, or the Button can consume the click and let OnClicked happen.

How can I get both to work?

I thought I could use OnPreviewMouseButton down, simulate my own OnClicked by setting a boolean in CustomButton called bIsMouseButtonDown, setting that variable in OnMouseButtonDown, unsetting it in MouseLeave and DragLeave, and checking for it in OnMouseButtonUp, and if it was true, then call ClickEvent (a custom event that I’d essentially just turn OnClicked into). But this wouldn’t work with OnDrop, because then OnButtonUp would consume the mouse up event and the OnDrop wouldn’t get it.

I tried disconnecting the EventReply from the DetectDragOnPressed node and instead, hooking up an Unhandled node to the Return node, but that didn’t work.

^ This could be construed as simply trying to figure out how to handle one input with multiple widgets; i.e. let the input keep bubbling up the chain instead of being consumed.

I also tried, after reading that doing drag and drop on Buttons is not really viable, to turn the Button into a Border instead. But I couldn’t find a way to register OnClicked for a Border widget.

So, either an answer to that would solve the problem, or just in general, the title of this post.

Thank you.

6 posts - 4 participants